最近在用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官方配置文档
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
