Question

我正在用webpack构建两个项目;一个是另一个的图书馆。

在构建我的包装器项目时，是否可以从我的库项目中使用源图？我希望能够从我的包装器UI调试我的库代码。

我的构建工作正常，因为库是内置的。唯一的问题是源图。我在浏览器调试器中看到的JavaScript是丑化的，因为源图不可用。

我的项目结构片段：

+-- my-ui/
    +-- dist/
        +-- my-ui.js
        +-- my-ui.js.map
    +-- node_modules/
        +-- my-lib/
            +-- dist/
                +-- bundle.js
                +-- bundle.js.map

来自webpack.config.js的片段：

module.exports = {
    entry: './src/js/main.jsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'my-ui.js',
        library: 'my-ui',
        libraryTarget: 'umd'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {test: /\.jsx?$/, loader: 'babel', include: path.join(__dirname, 'src')}
        ]
    },
    plugins: [
        new Clean('dist'),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            inject: true
        })
    ]
};

Answer 1

我终于找到了我的问题......

感谢@BinaryMuse提供source-map-loader的提示。这确实是正确的方法，虽然它最初并不适合我。

我最终意识到我需要在“my-lib”和“my-ui”中为webpack启用source-map-loader。如果在“my-lib”webpack配置中没有source-map-loader，则source-map-loader内部出现“my-ui”错误（遗憾地带有警告消息），因为它无法找到“my-lib”的传递依赖项的源映射。显然，源映射非常好，source-map-loader能够查看依赖树的所有方面。

另外值得注意的是，我使用source-map-loader和react-hot-loader一起遇到了问题。请参阅react-hot-loader不包含源地图。当source-map-loader试图找到它们时（因为它只扫描所有内容），它不能并且中止所有内容。

最终，我希望source-map-loader更具容错能力，但如果设置正确，它确实有效！

devtool: 'source-map',
module: {
    preLoaders: [
        {test: /\.jsx?$/, loader: 'eslint', exclude: /node_modules/},
        {test: /\.jsx?$/, loader: 'source-map', exclude: /react-hot-loader/}
    ],
    loaders: [
        {test: /\.jsx?$/, loader: 'raect-hot!babel', exclude: /node_modules/}
    ]
}

Answer 2

您应该可以使用Webpack提供的任何 eval 源地图选项。

实际上只需在devtool项目的webpack.config.js中设置正确的my-lib选项。

devtool: 'eval',

eval和eval-source-maps都应该有效。

有关各种选项，请参阅Webpack source map documentation。

Answer 3

我正在使用create-react-app，这就是我修复它的方式（不运行eject cmd）

注意：如果您的应用已使用webpack config覆盖react-app-rewired，则可以忽略前三个步骤。

npm i react-app-rewired -D-这将帮助您覆盖webpack 组态。
package.json-更改脚本，将react-scripts替换为react-app-rewired

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }

config-overrides.js-在应用的父级创建此文件。
npm i source-map-loader -D-加载源地图（假设您的lib的dist有源地图文件）。用来生成Rollup的构建工具（例如webpack，parcel或sourcemap）都没关系。
复制以下config-overrides.js中的代码

module.exports = {
  webpack: (config, env) => {
    // Load source maps in dev mode
    if (env === 'development') {
      config.module.rules.push({
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: ['source-map-loader'],
        enforce: 'pre',
      });

      // For `babel-loader` make sure that sourceMap is true.
      config.module.rules = config.module.rules.map(rule => {
        // `create-react-app` uses `babel-loader` in oneOf
        if (rule.oneOf) {
          rule.oneOf.map(oneOfRule => {
            if (
              oneOfRule.loader &&
              oneOfRule.loader.indexOf('babel-loader') !== -1
            ) {
              if (oneOfRule.hasOwnProperty('options')) {
                if (oneOfRule.options.hasOwnProperty('sourceMaps')) {
                  // eslint-disable-next-line no-param-reassign
                  oneOfRule.options.sourceMaps = true;
                }
              }
            }
          });
        }
        return rule;
      });
    }

    return config;
  },
};

重新启动您的应用程序（如果已在运行）。根据地图文件中的路径，source files被加载到不同的位置。耐心检查所有文件夹：）

注意： 1.根据源地图从xxx.js.map文件中读取的路径，将其加载到其中一个文件夹（例如localhost:3000或webpack:///）中。 2.如果将rollup用于库，请确保在配置文件（output.sourcemapPathTransform）中提供正确的路径，这将有助于将sourcemaps加载到正确的位置。

如何使用webpack加载库源映射？

3 个答案: