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