Webpack基础 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

（仅供自己参考，技术点请看字节整理的资料和相应官方技术文档）

这是前端入门 - 工程化篇系列里的第1篇《Webpack基础》

1. 本堂课重点内容：

1.1 课程介绍

本节课将重点围绕「构建 Webpack 知识体系」这一核心话题展开。在正式学习 Webpack 之前，本节课将解读为什么需要学习 Webpack ，Webpack 的本质是什么以及 Webpack 技术优势等相关知识。

1.2 课程重点

0. 为什么需要使用 Webpack
1. Webpack 打包核心流程：Entry => Dependencies Lookup => Transform => Bundle => Output
2. Loader 组件应用与开发原理
3. Plugin 组件应用与开发原理
4. Webpack 学习路径：入门：灵活应用 => 进阶：扩展Webpack => 大师：源码级理解Webpack打包编译原理

2. 详细知识点介绍：

2.1 什么是Webpack

为什么需要有Webpack：要手动管理依赖（/

因此需要Webpack来做前端资源编译和打包

2.2 Webpack使用方法

安装 -> 编辑配置文件webpack.config.js -> npx webpack

webpack配置可以分为：流程类和工具类

最基本的编写webpack.config.js：声明入口entry，声明出口output，运行npx webpack

最基本的使用：声明entry与output

Webpack处理CSS

接入Babel--JS代码转译工具

Babel：出现于2015年，JS推出es6，有很多新特性，浏览器无法兼容新版本es6，因此需要Babel将es6的JS转译为es5

Webpack生成HTML

Webpack工具线：模块热替换、Tree-Shaking删除Dead Code

其他工具：缓存、sourceMap、性能监控、日志、代码压缩、分包

2.3 理解loader

为了处理非标准JS资源（如CSS），需要loader进行资源翻译为标准JS

使用Loader：安装Loader -> webpack配置：添加module处理CSS文件

Loader链式调用

常见Loader

ndb debug工具

手写loader

 // loader.js
 module.exports = function (source, sourceMap?, ) {
     console.log(source);
     return source;
 }

2.4 插件

插件架构精髓：对扩展开放，对修改封闭

安装插件 -> 在webpack.config.js中引入插件/创建插件实例 -> npx webpack

手写一个插件：钩子（webpack运行到某一个事件时，触发钩子）

三、实践练习例子：

• 有什么实践举例帮助理解知识点？

四、课后个人总结：

• 是什么、小标题那些能口述清晰

五、引用参考：

• 深度剖析 Webpack 系列
• 深入浅出 Webpack
• Webpack Book
• Configuration | webpack
• Awesome-webpack-4plus