Webpack source-map-loader

從現(xiàn)有的源文件中提取 source maps（從 sourceMappingURL 中提?。?/p>

起步

安裝 ?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 入口提取現(xiàn)有的 source maps. 這些 source maps 既可以是內(nèi)聯(lián)的也可以是通過 URL 鏈接引入的。 所有的 source map 數(shù)據(jù)都按照選定的 source map style 交給 webpack 處理，這些選定可以在 ?webpack.config.js? 的 devtool 選項中配置。 在使用有自己 source maps 的第三方庫時，source-map-loader 就顯得尤為重要。 如果相關(guān) source map 數(shù)據(jù)沒有按照規(guī)范提取、處理并注入 webpack bundle, 瀏覽器有可能無法正確解讀這些數(shù)據(jù)。?source-map-loader? 允許 webpack 跨庫且持續(xù)的維護(hù) source map 數(shù)據(jù)，因而更易于調(diào)試。 ?source-map-loader? 可以從任何 JavaScript 文件中提取，這也包括 ?node_modules? 目錄下的 JavaScript 文件。 在設(shè)置 include 和 exclude 規(guī)則時，要保證構(gòu)建性能最優(yōu)。

最后按偏好運行 webpack 方法。

選項

filterSourceMappingUrl

類型：Function 默認(rèn)值：undefined

允許你為 SourceMappingURL 注釋指定 loader 的特定行為。

此函數(shù)的返回值必須為下列之一：

• true 或 'consume' — 使用 source map 并刪除 SourceMappingURL 注釋（默認(rèn)行為）
• 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 的更多信息，請查閱此文。

貢獻(xiàn)

如果您尚未了解，建議您閱讀以下貢獻(xiàn)指引。

許可

MIT