DevTools 无法为 webpack:///node_modules//..js.map 加载 SourceMap HTTP 错误：状态码 404，net::ERR_UNKNOWN_URL_SCHEME

Question

我创建了一个简单的基于 webpack 的项目来学习 snabbdom。一切正常，除了 sourcemap 加载失败：

我不知道是谁的问题（webpack，chrome）。有知道的人吗？

繁殖步骤：

git clone https://github.com/tomwang1013/snabbdom-test.git
npm install
npm run dev

Answer 1

您尝试加载的源映射node_modules位于 webpack 包中而不是它的一部分。“如果不提取并处理成 webpack bundle 的源地图，浏览器可能会误解源地图数据” ref。加载应用程序时，Chrome 开发工具控制台中会出现“ERR_UNKNOWN_URL_SCHEME”。

要将node_module源映射处理为 webpack 包，请使用source-map-loaderloader。这将修复控制台警告。

将依赖添加到package.json：

"devDependencies": {
        "source-map-loader": "^1.0.0",
        ...
      }

更新webpack.config.js：

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

},

通常，要为snabbdom-test项目生成源映射，您可以使用SourceMapDevToolPlugin.

更新webpack.config.js：

const { SourceMapDevToolPlugin } = require("webpack");

plugins: [
  new SourceMapDevToolPlugin({
    filename: "[file].map"
  }),
...
],

Answer 2

更新 webpack.config.js

module.exports = {
    // ...
    entry: {
      "app": "src/app.js"
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: "[name].js",
      sourceMapFilename: "[name].js.map"
    },
    devtool: "source-map"
    // ...
};

详细在https://blog.sentry.io/2018/10/18/4-reasons-why-your-source-maps-are-broken

Answer 3

添加devtool: 'eval-source-map'到 webpack.config 的最顶层

Answer 4

  devtool: "eval-cheap-source-map"

将此添加到您的 webpack 配置中，就是这样。