typescript - 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 的 repo 来演示这个问题。使用init.sh脚本安装并链接依赖，在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"
  // ...
};