这是我参与「第四届青训营 」笔记创作活动的的第12天。
什么是Webpack
本质上是一种前端资源编译、打包工具
使用Webpack
1、Webpack
-
安装：
npm i -D webpack webpack-cli -
编辑配置文件
-
执行编译命令：npx webpack
2、核心流程
3、模块化+一致性
4、使用Webpack
关于webpack的使用方法，基本都围绕“配置”展开，配置大致可以划分为两类：
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项。
- 工具类：主流程之外，提供更多工程化能力的配置项。
1、流程类配置
2、配置总览
3、文件结构
文件图
-
声明入口
entry -
声明产物出口
output -
运行
npx webpack
4、处理CSS
-
文件结构
-
安装Loader
npm add -D css-loader style-loader -
添加
module处理css文件
5、接入Babel
-
文件结构
-
安装依赖
npm i -D @babel/core @babel/preset-env babel-loader -
声明产物出口
output -
执行
npx webpack
6、生成HTML
-
文件结构
-
安装依赖
npm i -D html-webpack-plugin -
声明产物出口
output -
自动生成一个HTML文件
7、HMR（Hot Module Replacement）——模块热替换
-
开启HMR
-
启动Webpack
npx webpack server
8、Tree-Shaking——树摇
用于删除Dead Code Dead Code
- 代码没有被用到，不可到达
- 代码的执行结果不会被用到
- 代码只读不写
Tree-Shaking - 模块导出了，但未被其他模块使用
- 开启tree-shaking：
mode:"production" optimization:{ usedExports:true }
9、其它工具
- 缓存 Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
进阶篇：理解Loader
Loader的核心功能：为了处理非标准JS资源，设计出资源翻译模块（用于将资源翻译为标准JS）
1、使用Loader
-
文件结构
-
安装Loader
npm add -D css-loader style-loader less-loader -
添加module处理css文件
2、认识Loader:链式调用
-
less-loader：实现less=>css的转换
-
css-loader：将CSS包装成类似
moudle.exports = "${css}"的内容，包装后的内容符合JavaScript语法 -
style-loader：将css模块抱包进
require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
3、认识Loader:其他特性
特点：
- 链式执行
- 支持异步执行
- 分
normal、pitch两种模式
4、常见Loader
进阶篇：理解插件
插件架构精髓：对扩展开放，对修改封闭
-
钩子的核心信息
- 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情；
- 上下文：通过
tapable提供的回调机制，以参数方式传递上下文信息； - 交互：在上下文参数对象中附带了很多存在
side effect的交互接口，插件可以通过这些接口改变
学习方法
1、入门应用
-
理解打包流程
-
熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境
-
掌握常见脚手架工具的用法，例如
Vue-cli、create-react-app、@angular/cli
2、进阶
- 理解Loader、Plugin机制，能够自行开发Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
3、大师级
阅读源码，理解Webpack编译、打包原理，甚至能够参与共建
