Webpack 4 加载库 Sourcemap

Question

我在 MyApp 中加载了一个库 MyLib。两者都是用 webpack 4 编译的，MyApp 使用 source-map-loader 加载 MyLib 的源映射。从 webpack 4 开始，sourcemaps 指向一个缩小的文件而不是原始源代码。

调试到 MyLib 现在只需跳到以下源而不是实际代码：

(function webpackUniversalModuleDefinition(root, factory) { ... }

这曾经与 webpack 2 一起工作。发生了什么变化——或者我需要改变什么才能让它再次工作？

MyLib Webpack 配置

{
    output: {
        path: helpers.root('dist'),
        filename: 'my-library.js',
        library: 'my-library',
        libraryTarget: 'umd',
        umdNamedDefine: true,
        globalObject: 'this'
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },  
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('tsconfig.json') }
                    },
                ],
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJSPlugin({
                sourceMap: true
            })
        ]
    },
};

MyApp Webpack 配置

...
{
    test: /\.(js|js\.map|map)$/,
    use: ['source-map-loader'],
    include: [
        helpers.root('node_modules', 'my-lib')
    ],
    enforce: 'pre'
},
...

编辑

我添加了一个包含两个文件夹 library 和 user 的存储库来演示问题。使用init.sh脚本安装和link依赖，在user/src/main.ts下断点，使用Visual Code到运行.

Answer 1

由于 webpack v4 支持新的 mode 和 devtool 配置，您可以通过删除许多第三方插件来清理配置文件，因为它们现在带有 webpack v4：

尝试

1) 删除 source-map-loader 插件

2) 也从配置中删除以下内容

new UglifyJSPlugin({
  sourceMap: true
})

相反，只需使用 mode 中内置的 webpack 和 webpack.config.js 中的 devtool 配置：

module.exports = {
  mode: process.env.NODE_ENV === 'development' ? "development" : "production",
  devtool: process.env.NODE_ENV === 'development' ? "inline-source-map" : "source-map"
  // ...
};

Answer 2

您需要配置您所处的模式运行，

mode: 'development',
devtool: 'source-map',

Answer 3

原来这与两件事有关：

库在 output.library 中配置为 SomeLibrary 而不是 some-library。名称需要匹配npm模块的名称（node_modules中依赖的文件夹名称）。
在开发模式下，使用包的 sourcemap 选项是 cheap-eval-source-map，它会忽略加载程序，因此也会忽略 source-map-loader。将其更改为 eval-source-map 包括它。

Webpack 4 加载库 Sourcemap

Webpack 4 Load Library Sourcemap

typescript

webpack

source-maps

webpack-4