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

Question

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

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

调试我的库代码

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

我的项目结构片段：

+-- 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，"my-ui" 中的 source-map-loader 错误（遗憾地带有警告消息），因为它无法找到 t运行sitive 依赖项的源映射"my-lib"。显然，源映射非常好，source-map-loader 能够查看依赖树的各个方面。

另外值得注意的是，我运行遇到了将 source-map-loader 与 react-hot-loader 结合使用的问题。看，react-hot-loader 不包括源地图。当 source-map-loader 试图找到它们时（因为它只是扫描所有内容），它不能并中止所有内容。

最终，我希望 source-map-loader 能够容错运行t，但如果设置正确，它确实有效！

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 源映射选项。

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

devtool: 'eval',

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

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

Answer 3

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

Note : If your app is already overriding webpack config using react-app-rewired you can ignore first three steps.

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 根据地图文件中的路径在不同位置加载。耐心检查所有文件夹:)

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

Answer 4

我的回答与相似，我的目录结构也一样，唯一的区别是我使用的是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 的 devtools 中点击回溯时看到了我使用的依赖项的 TypeScript 源代码。见 Webpack docs for source-map-loader.

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

How to load library source maps using webpack?

javascript

reactjs

webpack