这是我参与「第四届青训营 」笔记创作活动的第11天
本堂课重点内容
由浅入深，从应用技巧到组件开发，再到 Webpack 构建流程的基本原理剖析，最后总结一套学习方法论，帮助读者 0 基础搭建 Webpack 知识体系。
详细知识点介绍
Webpack背景及意义
前端项目由各种文件资源组成：
早期手动管理这些资源就面临以下的问题，导致开发效率低：
- 依赖手工，比如有50个JS文件...操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
因此，就需要对前端项目实现工程化的工具，出现了Gulp、Require.js、Browserify、Vite、Webpack等等前端资源编译、打包工具。它们实现了：
- 多份资源文件打包成一个Bundle支持
- Babel、Eslint、TS、CoffeScript、 Less、Sass支持模块化处理css、图片等资源文件
- 支持HMR＋开发服务器
- 支持持续监听、持续构建支持代码分离
- 支持Tree-shaking支持Sourcemap
使用Webpack
基本操作
- 安装
npm i -D webpack webpack-cli - 编辑配置文件--webpack.config.js
- 执行编译命令
npx webpack
webpack打包流程
1.入口处理——Get Start
从‘entry’文件开始,启动编译流程
2.依赖解析——Dependencies Lookup
从‘entry’文件开始，根据'require’or 'import’等语句找到依赖资源
3.资源解析——Transform
根据’module’配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
4.资源合并打包——Combine Assets
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
经过打包后实现了模块化+一致性：
- 多个文件资源合并成一个，减少http 请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、CoffeeScript 方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc. .
webpack.config.js 的配置项
关于Webpack的使用方法,基本都围绕“配置”展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
最基本的有
- 'entry/output' ——入口文件/打包后的输出产物
- 'module/plugins'—— loader和plugin配置
- 'mode' ——development/production
- watch/devServer/devtool——实时监听、调试等
处理CSS
- 安装相关loader（style.loader、css.loader、less.loader）
- 配置module添加loader处理css文件
loader中test起到过滤文件作用
test:/\.css/ i,即以css为后缀的文件，use中规定引入的loader
接入babel（用于解决js版本不兼容问题，起到转译作用）
- 安装依赖
npm i -D ababel/core @babel/preset-env babel-loader - 声明产物出口'output'、执行npx webpack
生成HTML
- 安装相关插件
npm i -Dhtml-webpack-plugin - 声明产物出口'output'、执行npx webpack
设置HMR（模块热替换，修改模块无需刷新页面）
- 开启HMR
module.exports = {
devserver: {hot: true}
};
- 启动Webpack
npx webpack serve
设置tree-shaking（删除Dead Code） 两种实现方式
- 'mode: "production"
- optimization.usedExports: true`
理解 Loader
loader作用：由于Webpack只认识js文件，用于将非标准JS资源翻译为标准JS
特点
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
常用loader
链式调用
当处理less文件时，需要less->css->module.exports = "${css}"->包进require，注入到style标签
理解插件
插件架构精髓:对扩展开放,对修改封闭
如果不使用插件，系统功能全部堆在一起，就会十分臃肿，不利于扩展和学习
插件是由hook函数构成的
钩子的核心信息:
- 时机:编译过程的特定节点, Webpack会以 钩子形式通知插件此刻正在发生什么事情;
- 上下文:通过 tapable提供的回调机制，以参 数方式传递上下文信息;
- 交互:在上下文参数对象中附带了很多存在 side effect的交互接口，插件可以通过这些接口改变
- 时机:'compier.hooks.compilation'
- 参数:'compilation'等
- 交互: 'dependencyFactories.set'
webpack新手学习路线
课后个人总结
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
