SourceMap 浏览器控制台报错：DevTools failed to load SourceMap：Could not load content for ...

最新推荐文章于 2025-10-08 00:28:58 发布

原创最新推荐文章于 2025-10-08 00:28:58 发布 · 6.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #chrome #vue #javascript

前端兼容问题合集专栏收录该内容

17 篇文章

订阅专栏

本文介绍了SourceMap的概念及其在浏览器中的作用，并解释了压缩过程中可能产生的错误及如何使用Webpack进行SourceMap配置来解决这些问题。

什么是SourceMap：

SourceMap就是如何把压缩后的js代码映射成格式化代码的方法。当客户端浏览器Chrome在收到这个压缩后的js文件后，它会自动的去寻找服务器上相关的sourcemap文件并把压缩的js代码转换成格式规范的js代码

----------------------------------------------------------------------------------------

SourceMap报错原因：

压缩过程中可能会破坏掉js文件中的部分代码导致调用失败，浏览器则会通过SourceMap找到原来的js文件！当找不到SourceMap则弹出警告提示。

----------------------------------------------------------------------------------------

处理方法：

在webpack.config.js中添加devtool: "inline-source-map"

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "./src/index.html"),
    filename: "index.html"
});

module.exports = {
    mode: "development",
    // mode: "production"
    plugins: [
        htmlPlugin
    ],
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                use: "babel-loader",
                exclude: /node_modules/
            }
        ]
    },
    devtool: "inline-source-map"
};