DevTools failed to parse SourceMap 警告解决方法

最新推荐文章于 2024-10-30 09:56:33 发布

m0_67401499

最新推荐文章于 2024-10-30 09:56:33 发布

阅读量581

点赞数

分类专栏： java 文章标签： java 后端

本文链接：https://blog.csdn.net/m0_67401499/article/details/124505526

版权

java 专栏收录该内容

271 篇文章 8 订阅

订阅专栏

本文详细介绍了Webpack开发中DevTools抛出'SourceMap failed to parse'警告的原因及两种解决方案：禁用浏览器SourceMap和配置webpack使用inline-source-map。掌握这些技巧，让你的开发过程更加顺畅。

摘要由CSDN通过智能技术生成

最近在用webpack-dev-server进行开发的过程中，控制台一直报一个警告：DevTools failed to parse SourceMap: webpack:///node_modules/_sockjs-client@1.4.0@sockjs-client/dist/sockjs.js.map。下面给出消去这个警告的方法：

SourceMap技术

在处理该警告之前，有必要了解下什么是SourceMap，它是用来干什么的。在现在写网站的时候，如果有很多javascript文件，在渲染内容到客户端浏览器的时候，如果我们使用像webpack这样的打包工具的话，能够合并并且压缩那些js文件，并且去除其中的空格等元素，从而减小文件的容量，提高网页的反应速度。但是这样造成的问题就是在浏览器端无法对js文件进行调试，因为经过压缩的文件很紧凑，没有空格与换行。
概括来讲，SourceMap就是如何把压缩后的js代码映射成格式化代码的方法。当你在Production环境部署代码的时候，伴随着压缩与优化后的js代码，还要有一个包含原始js代码的sourcemap文件。当客户端浏览器Chrome在收到这个压缩后的js文件后，它会自动的去寻找服务器上相关的sourcemap文件并把压缩的js代码转换成格式规范的js代码。

去除警告

方案一：浏览器禁用sourcemap功能

首先打开Chrome浏览器的DevTools，方法如下：
在这里插入图片描述
将Enable JavaScript source maps取消勾选即可。

在浏览器中禁用该功能后警告不见了，但是这样没有从根本上解决问题。

方案二：配置webpack

在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"
};

推荐这种解决方案，再也不用看到烦人的警告了??
参考：解决DevTools failed to parse SourceMap警告
更多在webpack中配置devtool的方法见webpack官方配置文档