WebpackSourceMap的配置

webpack的官方网址官方

课程目标

1. sourceMap是什么
2. 配置

一、sourceMap是什么?

它是一个源代码和目标生成代码的映射关系，就是为了解决不好调式代码问题的,sourceMap就是一个文件，里面储存着位置信息。 仔细点说，这个文件里保存的，是转换后代码的位置，和对应的转换前的位置。

二、配置(在webpack.config.js中)

生产环境的配置devtool

module.exports = {
    mode:"development",//代表的为开发环境
    devtool:"source-map"//配置的sourceMap
    //还有一种
    devtool:"inline-source-map"//代表的是当我打包之后，在dist文件下不会生成一个.map的文件，但是会在index.js中生成一个base64的字符串
}
当我添加source-map后，在dist文件夹之后就会生成一个.map文件
devtool还可以搭配eval，cheap-module-eval-source-map,来使用，devtool："eval",

在生产环境建议使用，cheap-module-source-map
在开发环境中建议使用，cheap-module-eval-source-map

eval：的特点：
1. 打包速度最快
2. 针对于复杂的代码eval提示出来的错误坑可能不全

devtool的配置参数详细配置请看：网址

开发环境的devtool配置

module.exports ={
  mode:"production",
  devtool:"cheap-module-source-map"//代码错误的的提示
}

devtool的配置参数详细配置请看：网址