source-map-loader

npm node deps tests coverage chat size

从现有的源文件中提取 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.jsdevtool 选项中配置。 在使用有自己 source maps 的第三方库时,source-map-loader 就显得尤为重要。 如果相关 source map 数据没有按照规范提取、处理并注入 webpack bundle, 浏览器有可能无法正确解读这些数据。source-map-loader 允许 webpack 跨库且持续的维护 source map 数据,因而更易于调试。 source-map-loader 可以从任何 JavaScript 文件中提取,这也包括 node_modules 目录下的 JavaScript 文件。 在设置 includeexclude 规则时,要保证构建性能最优。

最后按偏好运行 webpack 方法。

选项

选项名类型默认值描述
filterSourceMappingUrl{Function}undefined允许控制 SourceMappingURL 的行为

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 的更多信息,请查阅此文

贡献

如果您尚未了解,建议您阅读以下贡献指引。

CONTRIBUTING

许可

MIT