Question

我宁愿在我的webpack配置中使用内联源映射，因为它源于实际的原始文件。

我的webpack配置是...

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();

我遇到的问题是，在浏览器控制台中，这显然应该使用inline-source-map映射到index.js:16。相反，它映射到MobileFilterComponent.js:15

对为什么会发生这种情况有任何想法吗？

有趣的是，当我使用eval-source-map时，它可以正确映射，但是文件名已更改。由于您可能不知道文件的命名方式，因此从ctrl + p的源代码中查找文件非常麻烦。

**请注意，我为此标了AEM，因为这是针对AEM项目的。我想知道是否当AEM构建clientlib.js时是否某些源映射被破坏了。

webpack内联源映射映射到错误的文件

0 个答案: