这部分主要是讲常见的loader和plugins部分。
一、loader部分
loader最好以后用对象的方式，loader执行时从下到上，从右到左的执行循序。
file-loader: 将文件打包到输出路径，并将打包后的路径返回，像字体打包，大图片打包等等。
url-loader: 可以设置limit值，如果小于值则以base64放入js，大于这个值则以file-loader打包。其中1024B=1k.
css-loader: 把一个或者多个css文件合并成一段css代码.
style-loader: 把css代码挂载到<head></head>中间。
postcss-loader: 主要用作添加厂商前缀(老版本浏览器)，额外添加authprefixer的插件，这部分看最新的npm文档或者webpack英文文档。
scss-loader: 主要时用于打包scss文件
- 如果业务代码中用import引入另一个scss文件，则会直接跳到css-loader执行，而跳过了scss-loader【因为scss-loader在css-loader右边，执行顺序是从右到左】，所以为了能用scss-loader打包，则在css-loader里面配置importLoaders:2就可以了，代表业务代码引入了其他样式文件都从scss右边的2个loader开始解析。
- 如果两个模块都用一个样式文件，为了是不受影响，则用modules:true的属性https://github.com/css-modules/css-modules。
babel-loader： 负责打通跟webpack的关联，并没有转换。
附加：babel
环境搭建&基本配置
（1）环境搭建
（2）.babelrc配置
（3）presets和plugins
babel-polyfill是什么？
（1）什么是Polyfill(历史)，就是对一些ES6以上的语法做兼容
缺点：会污染全局环境
（2）core-js(是很多高级库的集合像promise、es6等等)和regenerator
（3）babel-polyfill是（2）的集合，但是babel7.4弃用了，推荐直接使用（2），不过我还是讲讲它的用法
使用在每个js文件引入import '@babel/polyfill'就行，但是会比较多，我们可以在被指文件中加入
{
"useBuiltIns": "usage",
"corejs": 3
}
进行按需引入。
babel-runtime
不会影响全局，会重新取个名字，如果自己开发个库就必需用这个。
有关loader的具体内容详查：https://webpack.js.org/loaders/
二、plugins
plugins是并行的。
HtmlWebpackPlugin： 会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中。CleanWebpackPlugin： 打包前，先删除打包的内容。
splitchunkplugin：代码分割，具体代码分割见我的博客。
MiniCssExtractPlugin：css代码分割插件。
OptimizeCSSAssetsPlugin：css代码合并插件。
addAssetHtmlWebpackPlugin：引入已经打包好文件的插件。
workbox-webpack-plugin：pwa当服务器当掉还能利用缓存里面的插件。
copy-webpack-plugin： 复制包文件到dist
相关文档：https://webpack.js.org/plugins/
三、webpack内置
webpack-merge：将两块webpack内容进行合并。