生产模式下的 Webpack4 + Typescript5 源映射异常答案

【问题标题】：Webpack4 + Typescript5 source map exception while in production mode生产模式下的 Webpack4 + Typescript5 源映射异常
【发布时间】：2019-11-11 20:58:50
【问题描述】：

根据"Production" webpack guide，我正在尝试将源映射支持添加到生产/发布版本。

但是，当我尝试使用以下 npm 脚本在生产模式下运行 webpack 时出现异常：webpack --mode production -p --devtool source-map。它所做的只是：

将mode 设置为production
-p 参数是：shortcut for --optimize-minimize --define process.env.NODE_ENV="production"
并将devtool 设置为source-map

例外情况

Unhandled rejection Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.

tsconfig

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noUnusedParameters": true,
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ]
}

webpack 配置

const path = require('path');

module.exports = {
  entry: './src/app.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.ts']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  }
};

我的尝试

首先，我关注了TypeScript guide。他们也使用了源映射——主要区别在于源映射加载器，但是将下面的代码放入规则中并没有帮助：

{
  enforce: 'pre',
  test: /\.js$/,
  loader: 'source-map-loader'
}

然后，我试图弄乱源地图选项；在 tsconfig 中将 sourceMap 更改为 inlineSourceMap，在 webpack 配置中将 source-map 更改为 inline-source-map（尽管根据 webpack 指南不建议这样做），但没有成功。

最后，将 mode 和 devtool 添加到 webpack 配置不会改变任何内容，因此将它们作为参数传递似乎没问题。

更新

我想我做了一个迷你重现项目，所以我去掉了任何额外的加载器（例如 sass-loader）。一切正常。所以我假设其中一个加载器存在兼容性问题。

更新 2

经过几天的努力解决这个问题，我终于删除了 package-lock 文件和 node_modules 文件夹。我跑了npm install 然后一切正常...

【问题讨论】：

标签： typescript webpack-4

【解决方案1】：

这似乎是 terser 版本 4.0.1（webpack 的依赖项）中存在的错误，并已在版本 4.0.2 中修复。 4.0.2 版本于昨天（2019-06-30）发布。删除并重新制作您的锁定文件导致 npm/yarn 升级到固定版本。

对于遇到此问题的其他人，请尝试运行：

npm upgrade webpack terser

或

yarn upgrade webpack terser

【讨论】：