DevTools无法加载的源映射webpack:///node_modules//....js.map HTTP错误：状态代码404，net:：ERR\u未知\u URL\u方案

我创建了一个简单的基于网页包的项目来学习Snabdom。一切正常，但sourcemap加载失败：

我不知道这是谁的问题（网页包，chrome）。有人知道吗

复制步骤：

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

---

您尝试加载的源地图位于

节点\u模块中

，而不是webpack捆绑包的一部分。“如果未提取并处理到网页包包的源地图中，浏览器可能会误解源地图数据”。当应用程序被加载时，会导致chrome开发工具控制台中出现“ERR_UNKNOWN_URL_SCHEME”

要将

node\u模块

源地图处理到网页包包包，请使用

源地图加载器

加载器。这将修复控制台警告

将依赖项添加到

package.json

：

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

---

更新

webpack.config.js

：

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

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

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

},

一般来说，要为项目生成源地图，可以使用

SourceMapDevToolPlugin

---

更新

webpack.config.js

：

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

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

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

---

如果只想关闭这些选项，可以使用忽略它们的webpack

devtool

选项。详述于

转到浏览器中的开发工具

单击此处查看设置

禁用“启用JavaScript源映射”

---

更新

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"
    // ...
};

---

详细信息请参见

也许在每个js文件中都有类似url的注释：

/*#sourceMappingURL=dsggdgdg.fdgdfn.dfg.map*/

去掉那个

  devtool: "eval-cheap-source-map"

---

将此添加到您的网页包配置中，就这样。

将下面的行添加到您的网页包配置中

  devtool: 'source-map ./src',

---

@Phương Nam的回答将解决此错误，但即使设置了

文件名：“[name].js”

，网页也可能会警告我们多个资产向同一文件名发出冲突

要修复上述警告，我们可以使用

SourceMapDevToolPlugin

此插件支持对源地图进行更细粒度的控制 一代它还可以通过的某些设置自动启用 devtool配置选项

以下代码用于将配置选项

devtool:inline source map

替换为等效的自定义插件配置：

    // ...
    plugins: [
        // ...
        new webpack.SourceMapDevToolPlugin({})
        // ...
    ],
    devtool: false
    // ...

---

更多的示例将

devtool:'eval source map'

添加到webpack.config的最顶层

我得到了同样的结果@Rokas Lengvenis。在一个使用TypeScript的项目中，我的控制台上有相同的消息。只是为了证明我做得正确：我是否必须使用任何软件包管理器（如npm、Thread等）安装

源映射加载器

？或者我必须输入

package.json

和

webpack.config.js

并手动键入它吗？关于@jose-renato-m，您可以使用

Warn add source map loader

或

npm install

直接安装它。然后手动将此加载程序添加到

webpack.config.js

文件中，这样就可以在创建捆绑包时使用源映射“提取”节点模块。这帮助我修复了两个开发工具错误中的至少一个。谢谢。另一个是chromium bug，他们会在下一个浏览器补丁中修复，所以耶。。很烦人，但至少它不必与我自己的代码做任何事情。仅供参考，我使用了webpack 5。这对我很有用，谢谢。这只是在源代码映射中包含源代码内容，它不允许浏览器获取源代码本身，因为

sources

数组中的值仍将以

webpack://

开头。这对我有用不知道为什么？@waqashmed，因为它在DevTools设置中禁用了源代码映射检查。。。这是自动生成的行，即使您删除它们，它们也会在重新编译项目后重新生成，所以没有任何用处。