这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
课程重点
- Webpack 的本质
- Webpack 定义解析
- Webpack 优势
为什么要学习webpack
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
什么是Webpack
本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持Bundle、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理CSS、图片等资源文件
- 支持HMB+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap...
使用Webpack
示例：
核心流程————极度简化版
模块化和一致性
怎么使用Webpack
关于Webpack的使用方法，基本都围绕“配置” 展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
流程类配置
配置总览
接入Babel
生成HTML
工具线
HMR
Tree-Shaking
其他工具
理解Loader
Webpack只认识JS，为了处理非标准JS资源，设计出资源翻译模块————Loader用于将资源翻译为标准JS
认识Loader：链式调用
- less-loader：实现less=>css的转换
- css-loader：将CSS包装成类似module.exports = "${css}"内容，包装后的内容符合JavaScript语法
- style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
Loader其他特性
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
如何编写Loader
常见Loader
理解插件
插件是什么？为什么这么设计？
甚至，Webpack本身的很多功能也是基于插件实现的。
理解插件
写插件
- 首先：插件围绕“钩子”展开
学习方法
面试需要掌握到的程度：
