这是我参与「第四届青训营 」笔记创作活动的第5天
为什么要学习Webpack
- 理解前端“工程化”概念、工具、目标
- 团队需要，提升个人核心竞争力
- 高阶前端必经之路
什么是Webpack
本质上是一种前端资源编译（非js文件编译成js文件）、打包工具
使用Webpack
在VS Code终端中安装
- entry定义当前项目的入口
- output是定义当前项目打包完的出口
Webpack的使用方法基本都围绕“配置”展开
配置分为两类：
- 流程类：作用于流程中的环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
| 流程类配置 | ||
|---|---|---|
| 输入 | ‘entry’ | ‘entry’ ‘context’ |
| 模块解析 | ‘require’ ‘import’ | ‘resolve’ ‘enternals’ |
| 模块转译 | ‘module’ | ‘module’ |
| 后处理 | ‘output’ | ‘optimization’ ‘mode’ ‘target’ |
官网查看配置项：webpack.js.org/configurati…
简单事例学习
至少定义一个entry和output（更加简洁）
处理CSS
CSS需要定义一个新的module，rules中数组存在一个对象，包括test（过滤文件）和use（用什么loader，测试loader序列）属性。 最终，CSS将会被转译为一个字符串。
参考资料
