DevTools failed to parse SourceMap 警告解决方法

最近在用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官方配置文档

©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页