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

Question

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

然后我有第二个编译步骤，它使用webpack捆绑代码。

我在webpack.config.js启用了源映射：

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

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

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

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

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

编辑：

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

您可以在 webpack 中使用名为source-map-loader的预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目录webpack.config.js ，所以它们被忽略了......？

Answer 1

如果您将打字稿转换为 webpack 的一部分，您将获得源映射。

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 文件，那么您希望重用这些映射文件。 我可以告诉你，我测试过它可以与下面的解决方案一起使用。

然后这将使它工作：

  {
    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 正在开发 一个 tsconfig_ao1.json 用于 ngc 命令我有一个 tsconfig_ao2.json 使用 aot 文件夹与 main.ts 一起编译。 我在 webpack 之外使用 ngc，因为我无法在 webpack 中使用 @ngtools/webpack 没有问题。

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