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

Question

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

然后我进行第二个编译步骤，使用 webpack.

捆绑代码

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

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

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

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

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

中的 true

开发工具：'cheap-module-eval-source-map'，提供更快的构建以在开发中生成源地图。但它会将源映射内联。所以不用于生产。

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

如果您使用 angular 的 AOT 编译（使用来自@anguler/compiler 的 ngc 命令），并在 aot 文件夹中生成 .map 文件，那么您希望重新使用这些地图文件。我可以告诉你我测试过它可以使用下面的解决方案。

然后这将使它工作：

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

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

    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 到源映射文件的导入。

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

How to get Webpack to use already existing source maps when generating source maps?

javascript

webpack

source-maps