Webpack source-map-loader

从现有的源文件中提取 source maps（从 sourceMappingURL 中提取）。

起步

安装 ​source-map-loader​：

npm i -D source-map-loader

添加 plugin 至 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 maps. 这些 source maps 既可以是内联的也可以是通过 URL 链接引入的。 所有的 source map 数据都按照选定的 source map style 交给 webpack 处理，这些选定可以在 ​webpack.config.js​ 的 devtool 选项中配置。 在使用有自己 source maps 的第三方库时，source-map-loader 就显得尤为重要。 如果相关 source map 数据没有按照规范提取、处理并注入 webpack bundle, 浏览器有可能无法正确解读这些数据。​source-map-loader​ 允许 webpack 跨库且持续的维护 source map 数据，因而更易于调试。 ​source-map-loader​ 可以从任何 JavaScript 文件中提取，这也包括 ​node_modules​ 目录下的 JavaScript 文件。 在设置 include 和 exclude 规则时，要保证构建性能最优。

最后按偏好运行 webpack 方法。

选项

filterSourceMappingUrl

类型：Function 默认值：undefined

允许你为 SourceMappingURL 注释指定 loader 的特定行为。

此函数的返回值必须为下列之一：

• 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