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更新为以下内容之后，仍不使用现有的源映射：

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

我的猜测是，由于我现有的源映射所指向的文件位于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' 和“ sourceMap”：在tsconfig.json中为true

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

这是个大问题。为什么要将步骤与webpack分开？

如果您将AOT编译与angular一起使用（使用@ 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 ngc命令的tsconfig_ao1.json 我有一个tsconfig_ao2.json可以使用aot文件夹与aot main.ts一起编译。而且我在webpack之外使用ngc，因为我不能在webpack中使用@ ngtools / webpack而不出现问题。

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

生成源映射时，如何使Webpack使用现有的源映射？

1 个答案: