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

IT技术 javascript reactjs webpack
2021-05-08 10:40:57

我正在用 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
        })
    ]
};
3个回答

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

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

我最终意识到我需要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可以查看依赖树的所有方面。

另外值得注意的是,我遇到了一个source-map-loaderreact-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/}
    ]
}

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

真的,这相当于devtool在您webpack.config.jsmy-lib项目中设置正确的选项

devtool: 'eval',

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

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

我正在使用create-react-app,这就是我修复它的方式(不运行ejectcmd)

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

  • npm i react-app-rewired -D- 这将帮助您覆盖webpack 配置。
  • package.json- 更改您的脚本,替换react-scriptsreact-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 有源映射文件)。不要紧,它的构建工具(例如:Rollupwebpackparcel)使用来产生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:3000webpack:///)中。2. 如果你正在使用rollup你的库,请确保你在配置文件(output.sourcemapPathTransform)中提供了正确的路径,这将有助于加载sourcemaps到正确的位置。