这是我参与「第五届青训营 」笔记创作活动的第六天
一、重点内容
- Webpack 的本质
- Webpack 定义解析
- Webpack 优势
- 流程类配置
- 处理 CSS
- 接入 Bable
- 生成 HTML
- 使用 Loader
- 认识 Loader ：链式调用与其他特性
- Loader 编写
- 常见 Loader
- 插件定义解析
- 插件设计优势
- Loader 与插件的差异
- Webpack 学习方法推荐
二、详细内容
1、Webpack
本质上是一种前端资源编译、打包工具
- 支持Babel、Eslint、TS、CoffeScript、 Less、Sass
- 支持模块化处理 css、图片 等资源文件
- 支持 HMRR + 开发服务器支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking支持 Sourcema
2、使用Webpack
配置>
- 流程类:作用于流程中某个 or 若干个环节直接影响打包效果的配置项的
- 工具类:主流程之外，提供更多工程化能力的配置项
处理CSS
接入Babel
生成HTML
HMR
Tree-shaking
用于删除DeadCode
3、Loader
使用Loader
链式调用
- less-loader:实现 less => css 的转换
- css-loader:将 CSS 包装成类似 module.exports =“${css}”的内容，包装后符合 JavaScript 语法
- style-loader: 将 css 模块包进 require 语句，并在运行时调用 iniectStyle 等函数将内容注入到页面的 style 标签
其他特性
- 链式执行
- 支持异步执行
- 分 normal、pitch 两种模式
常见Loader
4、插件
5、学习方法
三、课后总结
- 重要需要知道配置
- 知道流程，运用webpack
- 了解常用Loader
- 以及插件
