webpack4.0 基础

前端构建工具对比

作用：

1. 把源代码转换成发布到线上的可执行 JS CSS HTML 代码；
2. 代码转换、文件优化、代码分割、模块合并、自动刷新、自动发布、代码校验

对比：
Grunt、Gulp：集成度不高，没法开箱即用
Fis3：官方团队不再维护；也不支持最新的node
Rollup：生态链、功能都不够完善；不支持 Code Spliting
Webpack：采用模块化开发的项目；社区活跃、配置灵活、插件化扩展、官方更新迭代快

webpack4.0 基础

1. 核心：entry、output、mode、loaders、plugins
2. 解析图片、字体；解析Css、Less、Sass
3. 文件指纹策略：hash、contenthash、chunkhash
4. 代码压缩

核心

entry: 打包的入口。单入口是一个字符串；多入口是一个对象

output：打包的输出。单入口/多入口配置：通过占位符确保文件名称的唯一

image.png

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

下篇，我们记录下webpack4.0 进阶

• px 自动转rem
• Tree Shaking 的使用和原理分析
• Scope Hositing 使用和原理分析
• 优化构建命令行的显示日志