webpack中SourceMap的配置

当我们js文件中出现错误时,我们可以在控制台看到dist目录下main.js文件第x行出错

sourceMap 它是一个映射关系，他知道dist目录下main.js文件第x行，实际上对应的是src目录下index.js文件中的第几x行

当前其实是index.js中第x行代码出错

​ 1. 打开webpack.config.js 文件

module.exports = {
    mode:'development',
    //打开sourceMap映射  推荐使用cheap-module-eval-source-map
    devtool:'source-map',
}

​ 2. 重新打包

这时候，当我们代码中出现错误时，在浏览器控制台查看，就可以看到实际的错误在哪里了！

更详细配置：webpack.js.org/configurati…

//当mode:"development"时
//推荐使用:
	devtool:"cheap-module-eval-source-map"
//错误提示较全面而且节省性能

//当mode:"production"时
//推荐使用:
	devtool:"cheap-module-source-map"