Javascript 网页包内联源映射映射到错误的文件

我更喜欢在我的网页配置中使用内联源映射，因为它将源映射到实际的原始文件

我的网页配置是

const paths = {
  src: './widgets/src/scripts/index.js',
  dest: '/src/main/content/jcr_root/etc/designs/universal-template-abloyalty/clientlib/js'
};

module.exports = (env, argv) => { 
  return {
    devtool: argv.mode === 'production' ? 'source-map' : 'inline-source-map',
    entry: paths.src,
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader', 'eslint-loader']
        }
      ]
    },
    output: {
      path: __dirname + paths.dest,
      filename: 'widgets.js'
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    }
  };
};

然后，例如在我的index.js中，我做了一个简单的控制台日志

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

initReact = () => {
  function createRootElement() {
    const el = document.createElement('div');
    el.id = 'root';
    document.body.appendChild(el);
    return el;
  }
  const root = document.getElementById('root') || createRootElement();
  ReactDOM.render(<App />, root);
  console.log('test');
};

if (typeof onReactReady === 'function') onReactReady();

导入'react app polyfill/ie11'；
导入“react app polyfill/stable”；
从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
initReact=（）=>{
函数createRootElement（）{
const el=document.createElement（'div'）；
el.id='根'；
文件.正文.附件（el）；
返回el；
}
const root=document.getElementById（'root'）| | createRootElement（）；
ReactDOM.render（，root）；
console.log（'test'）；
};
if（typeof onReactReady==='function'）onReactReady（）；

我遇到的问题是，在我的浏览器控制台中，这显然应该使用内联源代码映射映射到

index.js:16

。而是将其映射到

MobileFilterComponent.js:15

有没有想过为什么会发生这种情况

有趣的是，当我使用

eval source map

时，它映射正确，但文件名已更改。这使得在sources中从ctrl+p查找文件变得很麻烦，因为您可能不知道文件的名称

---

**注意我用AEM标记了这个，因为这是一个AEM项目。我想知道，当AEM构建clientlib.js时，是否会发现一些源映射是如何损坏的。

您使用的是标准AEM clientlib缩小版吗？@ronnyfm是的。我想这就是为什么映射实际上混淆了。试着禁用它，看看它是否在没有AEM缩小的情况下工作，或者考虑使用WebPACK来缩小。你使用标准的AEM CclitLIB缩写吗？@ RNYNFM是的，我们是。我想这就是为什么映射实际上被混淆了。试着禁用它，看看它是否在没有AEM缩小的情况下工作，或者考虑使用WebPACK来缩小。