前端构建工具对比
作用：
- 把源代码转换成发布到线上的可执行 JS CSS HTML 代码；
- 代码转换、文件优化、代码分割、模块合并、自动刷新、自动发布、代码校验
对比：
Grunt、Gulp：集成度不高，没法开箱即用
Fis3：官方团队不再维护；也不支持最新的node
Rollup：生态链、功能都不够完善；不支持 Code Spliting
Webpack：采用模块化开发的项目；社区活跃、配置灵活、插件化扩展、官方更新迭代快
webpack4.0 基础
- 核心：entry、output、mode、loaders、plugins
- 解析图片、字体；解析Css、Less、Sass
- 文件指纹策略：hash、contenthash、chunkhash
- 代码压缩
核心
entry: 打包的入口。单入口是一个字符串；多入口是一个对象
output：打包的输出。单入口/多入口配置：通过占位符确保文件名称的唯一
image.png
mode：用来指定当前的构建环境是：production、development、none，默认是production。设置 mode 可以根据不同环境，来加载 webpack 内置的函数
image.png
loaders：webpack 只支持 JS 和 JSON 文件类型，对于不支持的文件类型需要通过 Loaders 转化成有效的模块；
loaders 本身是一个函数，接受源文件作为参数，返回转换的结果
常用的 Loaders：babel-loader、css-loader、less-loader、ts-loader、file-loader、url-loader、raw-loader、thread-loader
plugins：用于 bundle 文件的优化、资源管理和环境变量注入；作用于整个构建过程；loaders 无法做的事情可以通过 plugins 完成
常见的Plugins：CommonsChunkPlugin、CleanWebpackPlugin、ExtractTextWebpackPlugin、CopyWebpackPlugin、HtmlWebpackPlugin、UglifyjsWebpackPlugin、ZipWebpackPlugin
解析css、图片、字体
style-loader 将样式通过