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

How to load library source maps using webpack?

提问by Jeff Fairley

I'm building two projects with webpack; one is a library for the other.

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

Is it possible to consume the sourcemaps from my library project when building my wrapper project? I would like the ability to debug my library code from my wrapper UI.

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

My build works correctly in that the library is built in. The only issue is sourcemaps. The JavaScript I see in the browser debugger is uglified, because sourcemaps are unavailable.

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

Snippet of my project structure:

我的项目结构的片段：

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

Snippet from webpack.config.js:

片段来自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
        })
    ]
};

采纳答案by Jeff Fairley

I finally figured out my issue...

我终于知道我的问题了...

Thanks to @BinaryMuse for the tip on source-map-loader. This indeed was the right way to go, though it wasn't working for me initially.

感谢@BinaryMuse 提供有关source-map-loader 的提示。这确实是正确的方法，尽管它最初对我不起作用。

What I eventually realized is that I need to enable the source-map-loaderfor webpack in both "my-lib" and"my-ui". Without source-map-loaderin "my-lib" webpack config, the source-map-loaderinside "my-ui" errors (with a warning message sadly) because it cannot locate source maps for transitive dependencies of "my-lib". Apparently the source maps are so good that source-map-loaderis able to peek at all aspects of the dependency tree.

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

Also of note, I ran into an issue using source-map-loaderin conjunction with react-hot-loader. See, react-hot-loaderdoes not include source maps. When source-map-loadertries to find them (because it's just scanning everything), it cannot and aborts everything.

另外值得注意的是，我遇到了一个source-map-loader与react-hot-loader. 看，react-hot-loader不包括源映射。当source-map-loader试图找到它们时（因为它只是扫描所有内容），它无法并中止所有内容。

Ultimately, I'd like source-map-loaderto be more fault tolerant, but when set up correctly, it does work!

最终，我希望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/}
    ]
}

回答by Noah Solomon

You should be able to use any of the evalsource map options that Webpack provides.

您应该能够使用Webpack 提供的任何eval源映射选项。

Really that just amounts to setting the right devtooloption in your webpack.config.jsfor the my-libproject.

真的，这相当于devtool在您webpack.config.js的my-lib项目中设置正确的选项。

devtool: 'eval',

evaland eval-source-mapsshould both work.

eval并且eval-source-maps都应该工作。

See the Webpack source map documentationfor the various options.

有关各种选项，请参阅Webpack 源映射文档。

回答by Yugandhar Pathi

I am using create-react-appand this is how I Fixed it (without running ejectcmd)

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

Note : If your app is already overriding webpack configusing react-app-rewiredyou can ignore first three steps.

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

• npm i react-app-rewired -D- This will help you to override webpackconfiguration.
• package.json- change your scripts, replace react-scriptswith 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- create this file in the parent level of the app.

• npm i source-map-loader -D- To load source maps (assuming that your lib's dist has source map file). It doesn't matter which build tool(ex: Rollup, webpackor parcel) you use to generate sourcemap.

• Copy below code in config-overrides.js

• 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;
  },
};

• Restart your app (if it's already running). source filesget loaded in different locations, based on path in map file. Check all folders patiently :)

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

Note : 1. Your source maps get loaded in one of the folder(ex : localhost:3000or webpack:///) based on path it reads from xxx.js.map file. 2. If you are using rollupfor your libs, please make sure you give proper path in the configuration file (output.sourcemapPathTransform ), This will help to load sourcemapsin the proper location.

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