这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
为什么要学习Webpack?
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack,某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
一、什么是Webpack
前端项目由什么构成？一资源
本质上是一种前端资源编译、打包工具。
多份资源文件打包成一个Bundle:
- 支持Babel、Eslint、TS、CoffeScript、.Less、Sass
- 支持模块化处理Css5、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 中支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
二、使用Webpack
核心流程
模块化和一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、CoffeeScript方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc......
使用Webpack
-
关于Webpack的使用方法，基本都围绕”配置” 展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个O若干个环节， 直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力 的配置项
Webpack流程类配置
-
Webpack配置属性至少必须要有：
- entry 入口
- output 出口
三、进阶篇：理解Loader
使用Loader
链式调用
- less-loader:实现less=>css的转换
- css-loader:将CSS包装成类似module.exports="${css}"的内容，包装后的内容符合JavaScript语法
- style-loader:将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
其它特性
特点：
- 链式执行
- 支持异步执行
- 分normal、.pitch两种模式
常见Loader
站在使用角度，建议掌握这些常见Loader的功能、配置方法。
四、进阶篇：理解插件
插件是什么？为什么这么设计？
很多知名工具，如：VS Code、Web Storm、Chrome、FirefoxBabel、.Vebpack、Rollup、Eslint Vue、Redux、Quil、Axios等等，都设计了所谓“插件"架构，为什么？
理解插件
-
钩子的核心信息：
- 时机：编译过程的特定节点，Webpack会以 钩子形式通知插件此刻正在发生什么事情，
- 上下文：通过tapable提供的回调机制，以参 数方式传递上下文信息；
- 交互：在上下文参数对象中附带了很多存在 side effect的交互接口，插件可以通过这些接 口改变
