这是我参与「第四届青训营」笔记创作活动的第10天
什么是Webpack
前端项目由什么构成? —— 资源
旧时代手动管理这些资源，但有以下几个对开发效率影响非常大的缺点：
- 依赖手工，比如有50个JS文件……操作过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、 图片、CSS资源管理模型不一致
后来，出现了很多前端工程化工具，特别是Webpack
Web本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持
- Babel、Eslint、 TS、 CoffeScript、Less、 Sass
- 支持模块化处理css、图片等资源文件
- 支持 HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap
- …
Webpack打包核心流程
示例
步骤
Entry => Dependencies Lookup => Transform => Bundle => Output
极度简化版：
- 从entry中的入口文件开始启动编译
- 依赖解析：根据require 或者 import 等语句找到以来资源
- 根据module 配置，调用资源转移器将非JS资源编译为JS内容，直至所有资源处理完毕
- 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
模块化 + 一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、 CoffeeScript 方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc…
关键配置项（如何使用？）
关于Webpack的使用方法，基本都围绕 配置 展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
ps：官网文档确实，看不太懂（）
配置总览：
按使用频率，主要有以下几大配置项
-
entry/output——程序输入输出，必需的
-
module/plugins
- 如图，比如我这个项目需要加载less文件，需要导入以下loader等
- mode
- watch/devServer/devtool
使用Webpack处理CSS/less等
使用Webpack接入Babel
使用Webpack生成html
使用Webpack——HMR
Hot Module Replacement——模块热替换（写的代码会被立刻更新到浏览器上~）
- 开启HMR
2. 启动webpack
使用Webpack——Tree-Shaking
Tree-Shaking -树摇，用于删除Dead Code
Dead Code
-
代码没有被用到，不可到达
-
代码的执行结果不会被用到
-
代码只读不写 Tree-Shaking
-
模块导出了，但未被其他模块使用 开启步骤？
-
mode: “production”
-
optimization: {usedExports: true}
ps：对工具类库如Lodash有奇效，能大大减小产物体积
其他工具
- 缓存
- Sourcemap （前面的课程中有提过）
- 性能监控
- 日志
- 代码压缩
- 分包
- …
理解Loader
Loader核心功能：将非JS资源转换为JS资源
认识Loader：链式调用
- less-loader: 实现less => css的转换
- css-loader: 实现css => js的转换，将CSS包装成类似module.exports = “${css}” 的内容，包装后的内容符合JavaScript 语法
- style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
认识Loader：其他特性
特点
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
- 参考：[Webpack 原理系列七：如何编写loader (qq.com)]
常用Loader
- 站在使用角度，建议掌握这些常见Loader的功能、配置方法
理解插件Plugin
什么是插件
- 很多知名工具，如:
- VS Code、Web Storm、Chrome、Firefox
- Babel、Webpack、 Rollup、 Eslint
- Vue、Redux、 Quill、 Axios
- 等等，都设计了所谓"插件”架构，为什么? 插件可以提升整个应用的拓展性
假设一个应用没有任何插件，整一个就是特别复杂的过程，那么：
- 新人需要了解整个流程细节，上手成本高
- 功能迭代成本高，牵一发动全身
- 功能僵化，作为开源项目而言缺乏成长性 心智成本高 => 可维护性低 => 生命力弱 插件架构精髓：对扩展开放，对修改封闭，其实就是开闭原则
甚至，Webpack本身的很多功能也是基于插件实现的
