为什么要去学习webpack
开发时可能会使用框架（react、vue）、ES6、less/sass等css预处理器；
这样的代码想要在浏览器运行必须经过编译，成为浏览器可以识别的js、css等语法，才可以运行；
webpack用来处理以上编译，并且具备压缩代码、兼容性处理、提升代码性能；
以一个文件或者多个文件作为打包入口，将整个项目所有文件编译组合成一个或多个文件输出；输出的文件就是编译好的文件，可以在浏览器运行；
webpack输出的文件叫做bundle；
功能介绍
- 开发模式：仅编译js的es module语法；
- 生产模式：能编译js的es module语法，还可以压缩js代码
但是webpack只能处理js语法，遇到css资源就无法处理了
核心功能
- entry
- output
- loader
- plugin
- mode
css处理
动态创建一个style标签，里面是css代码
图片资源
file-loader、url-loader（已经内置，不需要再安装了）
base64：将图片转化为字符串（不需要额外发请求了）
ESLint
eslintrc.js（error、warn）
eslintignore
babel
babel.config.js
presets：@babel/preset-env, @babel/preset-react, @babel/preset-typescript
@babel/preset-env：处理箭头函数
在webpack.config.js文件中对js文件加上babel-loader；排除exclude: /node_modules/
处理html资源
htmlPlugin
搭建开发服务器
使用devServer（不会输出资源，是在内存中编译打包）；自动搭建服务器，每次有代码修改，都自动重新打包
提取css成单独文件
MiniCssExtraPlugin.loader 替换掉style-loader
样式文件通过link引入，不再通过style标签引入
postcss-loader：处理样式兼容性（比如flex）
CssMinimizerPlugin：css插件压缩css文件
默认html、js都进行了压缩