生成源映射時如何讓 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 到源映射文件的導入。