webpack
1.SourceMap的配置
在webpack.config.js里先把sourceMap关掉
devtool:'none'
当我们写错一行代码时，它提供的是打包之后第几行代码错，1但我们想要源代码第几行错了，而不是打包之后的代码，这种情况怎么解决?
可以通过SourceMap解决
- SourceMap是一个映射关系，他知道dist目录下main.js文件实际上报错的那一行对应的是源代码的那个目录下文件下的第几行
- 把webpack.config.js里的devtool:source-map就可以了
**source-map:**dist文件下多了个main.js.map,这个里面是映射对应的关系
**inline-source-map:**添加他可以和source-map一样提示我们源代码第几行出错了，但这个打包之后，dist目录下没有main.js.map这个文件因为inline-source-map会直接写在main.js里
3. **cheap-inline-source-map**
当我们遇到代码量很大时，如果我们代码出错，恰好你的devtool没有加cheap,那么source-map会告诉你代码第几行第几列第几个字符出错了，精确到哪一行那一列，这样的映射比较耗费性能，我们只要告诉哪一行错了就行，这个时候就使用cheap-inline-source-map
2.开发环境线上环境
-
开发环境：cheap-module-eval-source-map
优点：提示最全，速度也快
-
线上环境：Production
使用：cheap-module-source-map
-
当我们打包代码出错时，不用source-map,我们只能知道打包出来的代码第几行出错了，并不知道对应的源代码哪里出错了，需要使用source-map帮我们做一个源代码和目标生成代码之间的一个映射
3.WebpackDevServer
作用：解决每次修改代码都得手动打包
一.
- 打开webpack.config.js文件，在scripts里写{"watch":"webpack-watch"}
- watch会帮我们监听打包文件，只要打包文件发生变化，就会自动重新打包
二.
-
在webpack.config.js里添加一个devSever:{contentBase:"/dist"}
-
在package.json文件里在scripts里写{"start":"webpack-dev-server"}
-
安装：npm install webpack-dev-serve -D
-
运行：npm run start
webpack-dev-server比--watch的好处
他不但监听到文件发生改变重新打包，他还会自动帮我们重新刷新浏览器，用它可以更方便提高代码开发率
三
-
在webpack.config.js里的devServer:{contentBase:'./dist,open:true,port:8080}
-
在package.json创建命令：scripts:{"middleware:"node server.js}
当运行npm run middleware时，想自己写一个服务器，这个服务器如果监听到src目录下文件有改变，他会向webpack-dev-server一样自动帮我们重启服务器，更新网页内容
4.Hot Module Replacement(热模块)
当代码改变，页面不刷新，改变css文件，不会更改js文件，方便调css样式，要配置Hot Module Peplacement
const webpack =require("webpack")
在webpack.config,js里的devserver配置
devServe:{
contentBase:"./diat",
open:true,
port:8080,
hot:true, //开启功能
hotOnly:""//即便html没有实现，也不让浏览器自动刷新
},
在Plugins写：
plugins:[
new webpack.HotModuleReplacementPlusin()
//配置webpack自带插件，需先引入webpack
]
这样html功能就开了
Tree Shaking
作用：只支持ES Module模块的引入方式
optimization:{
usedExpots:true
}
