Webpack 4 加载库源映射

Question

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

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

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

这曾经适用于 webpack 2。发生了什么变化——或者更确切地说，我需要改变什么才能让它再次工作？

MyLib Webpack Config

{
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
})
]
},
};

我的应用网络包配置

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

编辑

我添加了一个包含两个文件夹的存储库library和user来演示问题。使用init.sh脚本安装和链接依赖项，在user/src/main.ts中放置断点，然后使用可视代码运行。

Answer 1

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

尝试

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

事实证明，这与两件事有关：

• 库配置为output.library中的SomeLibrary，而不是some-library。该名称需要与 npm 模块的名称(node_modules 中依赖项的文件夹名称(匹配。
• 在开发模式下，使用包的源映射选项cheap-eval-source-map，这忽略了加载器，因此也忽略了source-map-loader。将其更改为eval-source-map包括它。

Answer 3

您需要配置正在运行的模式，

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