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

什么是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"
};