如何使用webpack加载库源映射

How to load library source maps using webpack?

本文关键字：映射 加载 何使用 webpack      更新时间：2023-09-26

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

我终于解决了我的问题。。。

感谢@BinaryMuse提供的关于源地图加载程序的提示。这确实是一条正确的道路，尽管最初对我不起作用。

我最终意识到，我需要在"my lib">和"my ui"中为webpack启用source-map-loader。如果在"my-lib"webpack配置中没有source-map-loader，"my-ui"中的source-map-loader就会出错(遗憾的是，会出现警告消息(，因为它无法定位"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/}
    ]
}

我的答案与@Jeff Fairley的类似，我有相同的目录结构，唯一的区别是我使用的是module: { rules: [] }而不是他的module: { preLoaders: [..], loaders: [...]}。这是我必须添加到我的webpack.config.js文件中的内容：

  mode: 'development',
  devtool: 'eval-source-map',
  module: {
    rules: [
      {
        test: /'.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      }
    ]
  },

然后我运行

npm i -D source-map-loader

在Chrome的开发工具中点击回溯时，我看到了依赖项的TypeScript源代码。请参阅source-map-loader的Webpack文档。

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

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

  • npm i react-app-rewired -D-这将帮助您覆盖webpack配置
  • package.json-更改脚本，用react-app-rewired替换react-scripts
  "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提供的任何eval源映射选项。

实际上，这相当于在webpack.config.js中为my-lib项目设置了正确的devtool选项。

devtool: 'eval',

CCD_ 38和CCD_。

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

相关文章：