Webpack5浅学
看的B站视频学习的，没有看官方文档学习，主要这样子学起来无脑一点。不推荐看尚硅谷和千峰教育的。
本来不想写文档的，之前看的React，一点文档都没写，因为教课老师直接写好了，但是这个没人写，还得靠自己。写起来可能没有逻辑顺序，就是记一下自己新学到的东西。
注意：webpack更新挺快的，有些命令什么的很有可能会过时，所以使用的时候需要根据版本号去查官方相应的文档才行。
配置文件
browserslist
这个配置项配置浏览器的兼容性，他这些信息是从caniuse.com网站统计获取的。
在packag.json文件中，有下面这个配置属性，这段我是从React脚手架创建出来的package.json中摘抄出来的，这里面表示的打包的文件兼容哪些浏览器，这里表示的是在生产环境中，选择那些占用率大于0.2%的，并且没有dead的（dead指的是两年内没有官方更新支持了），这个op_mini不知道是什么，大概猜测是opera mini这个手机浏览器？所以意思是不包括op_mini浏览器的所有浏览器吧。
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
也可以写到.browserslistrc文件下，不写在package.json，如下所示。
> 1%
last 2 versions
not dead
loader
css
在js中引用css文件，会用到css-loader，他会处理css文件，解析成对应的文本，然后style-loader根据这些文本，创建style标签，并且挂载到html标签上，所以这两个基本上是合在一块使用，不分开的。
当然用上了scss插件或者less插件，还需要安装sass-loader或者less-loader。然后在webpack里面配置一下。
css-loader中有个属性，叫做importLoaders，如果设置为1，当再次遇到css文件时，那么就去加载上一个插件，比如说用postcss再去处理一遍，视频在P11。
postcss
postcss类似babel的作用，相当于css的兼容性。比如说css有些新特性，某些浏览器不支持，或者某些特性，需要在前面加上前缀符，比如-webkit这种，就可以交给postcss自动处理编译。
因此需要安装postcss插件，但是postcss还不能直接用，它还需要安装其他插件，比如说刚才说的autoprefixer，可以去这个网站瞧一瞧Autoprefixer CSS online。对于有些比较新的css语法，可以使用其他插件，但是有一个插件，集大成者，只要安装了这个，其他的插件就可以不安装了。他就是**process-preset-env**插件。所以只用postcss里面的options里面用上这个process-preset-env插件就行了，具体配置也不写了，在视频页的P10。
file
file-loader，打包图片，会将原来的图片拷贝至打包目录，其中有一个属性esModule挺重要的，就是针对require引入的文件做点事情，在视频P12。
还有一个options，可以设置文件名name，'img/[name].[hash:6].[ext]'，比如这个意思就是把图片打包到img目录下，名称为原来的name值.文件哈希值取6位.原来的后缀名。在视频P13
url
url-loader，这个配置和file-loader差不多，但是这个是直接将图片变成base64文本，没有把原本的图片拷贝至打包目录。好处就是减少请求次数，坏处就是整体加载变慢了。视频P14
url-loader内部也可以调用file-loader，可以使用limit这个属性，单位是字节，比如设置25*1024，表示小于25KB的图片都直接以base64的形式呈现，否则拷贝源图片进来。
asset
file和url都需要单独安装，在webpack5里面，有个asset插件，相当于上面两个插件的功能，但是是内置的，不需要安装新的。当然具体配置名称已经变了。视频P15
- asset/resource相当于file-loader
- asset/inline相当于url-loader
- asset可以配置更加详细的内容，比如根据图片大小来判断使用哪种方法
处理字体内容在P16
babel
babel就是转换语法，比如把es6+的语法转换成es5，或者把jsx、ts的语法格式转换成js格式。视频P20、P21
babel-loader只能转换，具体的应用还需要加插件，可以直接安装一个包含大多数的预处理插件@babel/preset-env,这个合适的很。
文件babel.config.js就是babel具体使用的插件的集合配置信息了
在webpack中配置的时候，需要exclude node_modules，不对依赖包进行babel转换
polyfill
babel只对语法进行转换，但是对于不支持的语法无法进行转换，需要用polyfill进行填充，需要安装两个插件，一个是core-js（针对Promise这类EAMAScript特性），另一个是regenerator-runtime（针对generator这种底层啊，async await这种底层实现），视频P22
具体配置信息在babel.config.js中配置，里面有个useBuiltIns属性，包括三个值
- false表示不对当前js处理polyfill填充，应该是默认值
- usage表示依据用户源代码当中所使用到的新语法进行填充
- entry表示依据browserslistrc筛选出来的浏览器进行填充（把这几个浏览器版本不支持的特性都用polyfill填充，管你代码里写过没）
plugin
loader更多的是针对某种特定类型的文件，进行转换。plugin能做的事情更多了，比如删除dist目录啊，给文件压缩啊，这类杂七杂八的事情。视频P17
plugin是一个类，所以需要在webpack.config.js引入那个类，然后在plugins里面new一下，才能使用。
html-webpack-plugin打包会默认生成html文件，可以设置自定义的html模板。视频P18
DefinePlugin是webpack中自带的，不需要单独安装，作用就是定义全局变量，比如index.html中的BASE_URL这种参数，就可以通过这个插件定义。
copy-webpack-plugin复制文件，比如直接复制public下的所有文件，就不需要手动复制了
实时预览
想要实时编译、查看效果，有一种方法，就是对webpack命令加上–watch，或者是在配置文件中watch属性改为true，但是这有好几点不足。视频P23
- 所有源文件都会编译
- 每次编译后都要对文件进行读写（固态硬盘伤不起）
- 需要借助vscode live server来开启服务
- 不能实现局部更新
所以需要用上webpack-dev-server这个插件，这个插件不会生成本地文件，而是直接在内存中操作，所以比较快，而且不伤固态硬盘。直接在package.json中配置命令就行了，比如 webpack serve --config lg.webpack.js
webpack-dev-middleware插件配合服务端框架，例如express，就可以自定义更加复杂的更新。视频P24
热更新
什么是热更新，就是只更新你改变过的组件，只更新那一部分，不更新其他部分，简称HMR
用上webpack-dev-server插件，在webpack配置项中，配置开启热更新，如下所示，视频P25。
devServer:{
hot: true
hotOnly: true, //发生错误时，页面不刷新（这个属性好像没了，变成hot: 'only'?）
port: 4000,
open: false //自动打开浏览器，但是会影响性能
compress: true // 压缩（版本更新了可能又没有这个属性了）
historyApiFallball: true // 解决前端路由404的问题
proxy:{
// 设置代理
}
}
但是还不能热更新，还需要在入口index.js文件中判断module.hot，开启module.hot.accept，监听某个文件，才行执行热更新（好麻烦，这个就稍微记一下好了）
其他配置项
resolve解析文件路径，比如默认的后缀名啊，巴拉巴拉的
devtool设置为source-map，可以对定位到源文件的错误，而不是打包后文件的错误
