这是我参与「第四届青训营」笔记创作活动的的第11天
为什么要学习Webpack
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack,某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
什么是Webpack
Webpack打包核心流程
模块性+一致性
使用Webpack
流程类配置
配置总览
按使用频率:
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
流程类
处理CSS
接入Babel
生成HTML
工具类
模块热替换(Hot Module Replacement)
树摇(Tree Shaking)———用于删除Dead Code
Loader组件
为了处理非标准JS资源,设计出资源翻译模块
用于将资源翻译为标准JS
使用Loader
其他特性:
特点:
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式