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

问题描述 投票:2回答:1

我创建了一个基于webpack的简单项目来学习戒烟。一切正常,除了sourcemap加载失败:

enter image description here

我不知道是谁的问题(webpack,chrome)。有谁知道吗?

复制步骤:

git clone https://github.com/tomwang1013/snabbdom-test.git
npm install
npm run dev
webpack google-chrome-devtools
1个回答
0
投票

您尝试加载的源地图位于node_modules中,而不是webpack捆绑包的一部分。 “如果未提取并处理到Webpack捆绑包的源地图中,浏览器可能会误解源地图数据” 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"
  }),
...
],
© www.soinside.com 2019 - 2024. All rights reserved.