这是我参与「第五届青训营」伴学笔记创作活动的第 13 天
一、本堂课重点内容：
- Webpack简介
- webpack用法
- loader及插件介绍
二、详细知识点介绍：
webpack简介
为什么学习webpack？
- 帮助理解工程化概念
- 高阶前端必备
- 团队核心竞争力
前端项目构成：资源文件
而旧式的手动管理资源模式（在页面引入）十分麻烦，效率很低
于是工程化工具诞生
webpack
本质上是一种前端资源编译、打包工具
功能包括但不限于：
- 多份资源文件打包成bundle
- 支持多种特性如TS、Sass、Eslint等
- 支持模块化处理CSS、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
webpack用法
1.安装
npm i -D webpack webpack-cli
2.编辑配置文件 webpack.config.js
3.执行编译命令
npx webpack
核心流程
- 入口处理
- 依赖解析
- 资源解析
- 资源合并打包
本质功能：
模块化+一致性
实际用法：
就是怎么写配置文件
配置项
流程类
作用于流程中的环节
- 输入：entry、context
- 模块解析：resolve、externals
- 模块转译：module
- 后处理：mode、target
- 输出：output
工具类
主流程外提供工程化的工具配置
部分用法简介
CSS加载
loader
npm add -D css-loader style-loader
添加module
在index.js文件中import
loader的作用：
帮助加载非js标准资源
与在html文件中维护css相比的优劣：
在资源多，工程量大时体现出极高的可维护性，提高效率
接入Babel
npm i -D @babel/core @babel/preset-env babel-loader
babel功能：
是一个工具链，用于转译编译JS、TS，提高兼容性
生成HTML
npm i -D html-webpack-plugin
自动生成html的优点
自动生成可以减少手写便签等重复的工作，提高效率，还能自动适配链接依赖，提高了可维护性。
工具类
HMR 模块热替换
可以即时更新代码在页面的效果,提高开发调试的效率
在配置文件中开启
module.exports = {
//...
devServe:{
hot: true
}
};
启动：
npx webpack serve
Tree-Shaking
用于清除Dead Code，避免代码冗余
mode:production
optimization:{
usedExports: true
}
其他工具
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
理解Loader
loader的功能就是资源的转化
因为webpack只认识JS，要处理非标准JS资源，就需要loader进行资源的转化
链式调用：
如less-loader、css-loader、style-loader之间的联系
简单来说就是每个loader层级不同，基层loader的输出是下一层的输入，只有经过逐步的转化才能实现最终的加载。
- 支持异步执行
- 分为normal、pitch两种模式
理解插件
webpack编译过程极其复杂，难以上手
于是有了插件
插件架构精髓：
- 对扩展开放、对修改封闭
既提高了可扩展性，也保证了一定的安全性
loader和插件
插件用于解决loader无法解决的其他功能
插件围绕钩子展开
钩子关键
- 时机
- 上下文
- 交互
学习方法
入门
- 理解打包流程
- 熟悉掌握配置项
- 掌握常见脚手架用法
进阶
- 理解Loader、Plugin机制
- 理解常见性能优化
- 理解前端工程化概念
大师级
- 阅读源码，理解webpack编译、打包原理，参与共建
三、课后个人总结：
今天的课程主要围绕webpack这个工具展开。为了更好的工程化，webpack这类应用应运而生。就拿webpack来说，它能够将资源文件打包，生成为指定文件，大大减少维护工程的繁琐度。webpack的各种插件也提高了其可扩展度，总而言之，今天介绍的webpack工具是迈向前端工程化重要一步，需要后续好好学习。
如有错漏，欢迎指出，谢谢。
