source-map-loader

从现有源文件（通过它们的 <code>sourceMappingURL</code>）中提取 source map。

入门

首先，你需要安装 source-map-loader

npm i -D source-map-loader

或

yarn add -D source-map-loader

或

pnpm add -D source-map-loader

然后将加载器添加到你的 webpack 配置中。例如：

file.js

import css from "file.css";

webpack.config.js

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

source-map-loader 从所有 JavaScript 入口文件中提取现有的 source map。这包括内联 source map 以及通过 sourceMappingURL 链接的 source map。

所有 source map 数据都将传递给 webpack 进行处理，处理方式由 source map 样式决定，该样式在 webpack.config.js 的 devtool 选项中指定。

当使用带有自身 source map 的第三方库时，此加载器尤其有用。如果未将这些 source map 提取并处理到 webpack bundle 的 source map 中，浏览器可能会误解或忽略 source map 数据。

source-map-loader 允许 webpack 维护跨库的 source map 数据连续性，从而保留调试的便利性。

source-map-loader 会从任何 JavaScript 文件中提取 source map，包括 node_modules 目录中的文件。

请注意设置 include 和 exclude 规则条件，以最大化打包性能。

最后，使用你通常使用的方法运行 webpack（例如，通过 CLI 或 npm 脚本）。

选项

filterSourceMappingUrl

类型：Function 默认值：undefined

允许你指定加载器对 SourceMappingURL 注释的处理行为。

该函数必须返回以下值之一

• true 或 'consume' - 使用 source map 并删除 SourceMappingURL 注释（默认行为）
• false 或 'remove' - 不使用 source map 并删除 SourceMappingURL 注释
• skip - 不使用 source map 且不删除 SourceMappingURL 注释

配置示例

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: [
          {
            loader: "source-map-loader",
            options: {
              filterSourceMappingUrl: (url, resourcePath) => {
                if (/broker-source-map-url\.js$/i.test(url)) {
                  return false;
                }

                if (/keep-source-mapping-url\.js$/i.test(resourcePath)) {
                  return "skip";
                }

                return true;
              },
            },
          },
        ],
      },
    ],
  },
};

示例

忽略警告

要忽略警告，你可以使用以下配置

webpack.config.js

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

有关 ignoreWarnings 选项的更多信息，请参阅此处

贡献

我们欢迎所有贡献！如果您是新用户，请在提交问题或拉取请求之前花一些时间阅读我们的贡献指南。

贡献

许可证

MIT