前端工程化 webpack 学习笔记

大家好，我是晨光，检索了一下发现星球里面没有 webpack 相关的知识点，恰巧之前学习的时候整理了一些笔记，分享给各位鱼友，希望能对大家有所帮助。

学习笔记主要分为下面几个方面

1. 基础篇：掌握 webpack 的核心概念和开发必备技巧
2. 进阶篇：编写 webpack 的构建配置并掌握优化策略
3. 原理篇：剖析内部运行原理并编写自定义 Loader 和插件
4. 实战篇：通过 webpack 商城项目实战牢固掌握所学知识

学习笔记来自极客时间 程柳峰 老师的《玩转 webpack》课程，笔记内容肯定没有老师讲的全，如果有需要，可以直接去购买课程，听老师讲，自己的理解更深刻些

我也是在学习中，了解了 webpack 的魅力，笔记会分为多篇分享，感兴趣的同学可以继续往下看～

一、为什么需要构建工具

1. 转换 ES6 语法
2. 转换 JSX
3. css 前缀补全/预处理器
4. 压缩混淆
5. 图片压缩

二、为什么选择 webpack？

1. 社区生态丰富
2. 配置灵活和插件化扩展
3. 官方更新迭代速度快

三、webpack 核心概念：

1. entry 单个入口为字符串，多入口为对象
2. output 单入口可固定文件输出名，多入口，用[name]占位符
3. loaders
4. webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文件类型并且把他们转换成有效的模块，并且可以添加到依赖图中。
5. 本身是个函数，接受源文件作为参数，返回转换结果
6. Plugins 插件用于 bundle 文件的优化，资源管理和环境变量注入，作用域整个构建过程

1. Mode 用来制定当前的构建环境，production，development，none

四、文件指纹：可以用作版本管理

1. Hash：和整个项目构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改
2. Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会生成不同的 chunkhash 值
3. Contenthash：根据文件内容来定义 hash， 文件内容不变，则 contenthash 不变

五、文件压缩 webpack plugins

1. js 文件压缩，内置 uglifyjs-webpack-plugin
2. css 文件压缩，
3. webpack4 optimize-css-assets-webpack-plugin， cssnano 预处理器
4. webpack5 css-minimizer-webpack-plugin
5. html 文件压缩， html-webpack-plugin，设置压缩参数

六、清除文件目录

1. webpack 4 ，使用 clean-webpack-plugin 进行清除
2. webpack 5 , 使用 output 的 clean: true, 即可清除打包的 dist 目录

七、css 样式前缀补全

1. 查询 css 属性浏览器的支持情况，通过 can i use 网站，查看浏览器兼容性
2. 通过 postcss-loader 配置样式补全。

package.json 中

八、移动端 css px 自动转换成 rem

1. px2rem-loader
2. lib-flexible

九、资源内联

1. 代码层面
2. 页面框架的初始化脚本
3. 上报相关打点
4. css 内联，避免页面闪动
5. 请求层面
6. 减少 http 网络请求数
7. 小图片或者字体内联 （url-loader）

使用 row-loader 内联 html 和 js

以上，全文完，笔记持续更新中~