前端构建工具对比
作用：
- 把源代码转换成发布到线上的可执行 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 将样式通过<style>标签插入到 head 中
css-loader 用于加载 .css 文件，并转换成 commonjs 对象
file-loader 用于解析图片、字体
url-loader 也可以处理图片和字体，可以设置较小资源自动转 base64
image.png
image.png
文件指纹策略
概念：打包后输出的文件名的后缀
作用：进行版本管理
image.png
常见的文件指纹有三种：
- hash：和整个项目的构建相关，只要项目文件有修改，整个项目的 hash 值就会改变
- Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 就会生成不同的 chunkhash 值
-
Contenthash：根据文件内容来定义 hash，文件内容不变，则 contenthash 不变
使用场景：JS- chunkhash 、 CSS-contenthash 、 图片 字体- hash
image.png
代码压缩
JS 文件压缩：webpack 4 默认内置了 uglifyjs-webpack-plugin
css 文件压缩：optimize-css-assets-webpack-plugin，同时使用 cssnano 预处理器
html 压缩：html-webpack-plugin，设置压缩参数 minify
image.png
minify 详情配置：https://github.com/kangax/html-minifier#options-quick-reference
下篇，我们记录下webpack4.0 进阶
- px 自动转rem
- Tree Shaking 的使用和原理分析
- Scope Hositing 使用和原理分析
- 优化构建命令行的显示日志
网友评论