javascript - 如何让 Webpack 在生成源映射时使用已经存在的源映射？

Question

我有 JavaScript 代码和从 TypeScript 代码生成的源映射(使用 tsc)。

然后我进行第二个编译步骤，使用 webpack 打包代码。

我在 webpack.config.js 中启用了 source maps:

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

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

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

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

如何获取 Webpack 源映射以包含现有映射？

编辑:

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

您可以使用名为 source-map-loader 的 webpack 预加载器:https://webpack.js.org/loaders/source-map-loader/

但是，在安装source-map-loader 并将webpack.config.js 更新为以下内容后，仍然没有使用现有的source maps:

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

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

Answer 1

如果您将 typescript 转译为 webpack 的一部分，您将获得源映射。

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

你需要 devTool: webpack 中的 'source-map' 和 "sourceMap": true 在 tsconfig.json

devtool: 'cheap-module-eval-source-map', 提供更快的构建以在开发中生成源 map 。但它会将源映射内联。所以不适用于生产。

所以这是个大问题。为什么要和 webpack 分开一步？

如果您使用 Angular 进行 AOT 编译(使用来自@anguler/compiler 的 ngc 命令)，并在 aot 文件夹中生成 .map 文件，那么您希望重用这些 map 文件。我可以告诉你，我测试过它可以与下面的解决方案一起使用。

然后这将使它工作:

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

重要的是你有 sourceMap: true 在 tsconfig 中，如果你使用一个，在最小化器中:

    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 文件夹与 aot main.ts 一起编译。我在 webpack 之外使用 ngc，因为我无法在 webpack 内毫无问题地使用 @ngtools/webpack。

如果您正在做其他事情，您应该了解 source-map-load 仅在其测试匹配的文件具有源映射并且文件是从条目加载的树的一部分时才加载源映射。必须有从 main.ts 到源映射文件的导入。