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

 

Logo

鸿蒙生态一站式服务平台。

更多推荐