如何让Webpack在生成源代码映射时使用已有的源代码映射？

Question

如何让Webpack在生成源代码映射时使用已有的源代码映射？

4

我有 JavaScript 代码和从 TypeScript 代码生成的源地图（使用 tsc）。

然后，我进行了第二个编译步骤，使用 webpack 捆绑代码。

我已在 webpack.config.js 中启用了源地图：

module.exports = {
  devtool: "source-map"
}

生成的源映射并不完全正确。

Webpack没有考虑从TypeScript代码生成的现有源映射。

这会导致映射到JavaScript代码而不是TypeScript代码。

如何让Webpack源映射包含现有的映射？

编辑：

重命名我的问题，并在谷歌上搜索后，我找到了一个答案。

您可以使用Webpack的预加载程序source-map-loader: https://webpack.js.org/loaders/source-map-loader/ 但是，在安装source-map-loader并将webpack.config.js更新为以下内容后，仍然没有使用现有的源映射：

module.exports = {
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }
    ]
  }
}

我的猜测是，因为我的现有源映射文件指向的文件位于webpack.config.js中的entry目录之外，所以它们被忽略了…？

- David Callanan

是的，你的问题标题肯定需要改变：如何让Webpack在生成源映射时使用已经存在的源映射？- 你当前的配置正在按照你所要求的方式进行。Webpack没有映射TypeScript，现有的映射也不会反映捆绑包中的内容，而是反映转换后的JavaScript中的内容。不确定是否有实现你目标的方法。 - Randy Casburn

我已经更新了问题。如果没有解决方案，那将是令人失望的。 - David Callanan

好的，我认为我们需要从两个方面考虑这个问题：1）原始源映射（SM）指向什么？是从转译后的JavaScript反射出来的TypeScript。如果转译后的JavaScript文件被删除或更改，则SM会中断。因此，简单地包含原始SM是行不通的。2）webpack工作流程：将TS转译，放置到引用行号的捆绑包中，根据_转译JS在捆绑包中的位置_编写SM。这是无法在捆绑包创建之外完成的工作流程的一部分。 - Randy Casburn

我希望有一种方法可以剪枝到映射。所以，如果捆绑包中的A映射到js中的B，而js中的B映射到ts中的C，那么A可以直接映射到C。
我希望TypeScript能够在webpack内进行转译，但我有代码共享服务器、客户端和其他构建。例如，我的react native客户端正在使用不同的内置捆绑程序。
也许有不同的打包工具可以做到这一点。

- David Callanan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thierry Vilmart · Accepted Answer

如果你在Webpack中将TypeScript转译，就会得到它的源代码映射。

devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ([
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: 'tsconfig.json' }
          },

你需要在webpack中使用devTool: 'source-map'，并在tsconfig.json中设置"sourceMap": true。

devtool: 'cheap-module-eval-source-map'提供了更快的构建速度来生成开发环境下的源映射。但是它会将源映射放在内联中，因此不适用于生产环境。

那么重要的问题是，为什么要将步骤与webpack分开？

如果你在angular中使用AOT编译（使用@anguler/compiler中的ngc命令），并在aot文件夹中生成.map文件，则希望重复使用map文件。我可以告诉你，我测试过以下解决方案可行。

然后这样做就可以了：

  {
    test: /\.js$/,
    use: ["source-map-loader"],
    enforce: "pre"
  },

在 tsconfig 中需要设置 sourceMap: true，并且如果使用 minimizer，则同样需要设置。

    optimization: {
        minimizer: [
          new TerserPlugin({
cache: true,
        parallel: true,
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        }

我在开发中有一个tsconfig.json文件

用于ngc命令的tsconfig_ao1.json文件

我有一个tsconfig_ao2.json文件，用于使用aot文件夹编译main.ts，并且我在webpack之外使用ngc，因为在webpack内无法使用@ngtools/webpack，存在问题。

如果你在做其他事情，你需要理解source-map-load只会在它测试匹配的文件具有源映射，并且如果这些文件不是从entry加载的树的一部分，则不会加载源映射。必须从main.ts导入到正在进行源映射的文件。