webpack - 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 bundle 的一部分。 “如果不提取并处理成 webpack bundle 的源 map ，浏览器可能会误解源 map 数据”ref .加载应用程序时，Chrome 开发工具控制台中会出现“ERR_UNKNOWN_URL_SCHEME”。

处理 node_module源映射到 webpack 包，使用 source-map-loader装载机。这将修复控制台警告。

将依赖添加到 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"
  }),
...
],