这是我参与「第四届青训营 」笔记创作活动的第10天
Webpack
重点知识点介绍
- 为什么要学习Webpack
- 什么是Webpack
- Webpack 打包核心流程
- 如何学习 Webpack
详细知识点介绍
一、为什么要学习 Webpack
通过学习Webpack后可以掌握什么是工程化，工程化的目标是什么等，并且在一个团队里总需要某些人去掌握这些工具，对工程化要求比较高的工程都需要Webpack，需要人去解决实际开发中的问题，学习Webpack可以提升自己的核心竞争力，并且在学习前端中需要去熟悉Webpack的基本使用，是前端的必经之路了。
二、Webpack 介绍
在很久以前（09年）会在页面里面直接引入外部资源，通过手动管理，如果外部引入的资源多的话，关是资源引入就需要写很多行，比较麻烦和繁琐。并且针对图片这些资源会更繁琐，于是有了许多工程化的工具。
Webpack 编译和打包两个核心功能
- 编译：将图片资源和一些非标准的代码编译成标准的
- 打包：有自己一套资源文件管理的规范
三、Webpack 的基本使用方法
- 安装 npm i -D webpack webpack-cli
- 编辑配置文件
- 执行编译命令 npx webpack
这样就实现了编译和打包，会在dist文件夹里生成打包好的代码，实现将几个文件打包成一个文件
要真正使用好webpack，核心在于怎么写配置文件，知道配置文件作用和如何编写
webpack的每一个配置项都有很多可以展开的地方，这些配置项可以大致分为两类
流程类和工具类 流程类是针对于打包流程的配置，工具类是主流程外提供更多的工程化能力的配置
与流程类配置相关的是
与工具类配置相关的是
按配置的使用频率可以得出以下排名
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
其中，1是必须要提供的很基础的配置，新手上路可以先从这几个学，官网下有相关内容
四、Webpack 的打包流程
核心流程：
注意2和3是一个递归过程，会反复循环执行，直到所有资源都被编译后才到第四步
经由webpack处理后的文件，实现了模块化和一致性
五、如何学习 Webpack
老师还帮我们梳理了一个Webpack的体系结构图，帮助我们更好的学习，并且会一直维护下去 Webpack 5 知识体系 - GitMind
同时老师还帮我们做了个浓缩，对新手十分友好
小结
虽然 webpac k使用简单，但也只停留在入门阶段，对于性能方面，脚手架之间的性能区别都不是很了解。按照老师的思维导图学习，可以应付绝大多数的业务问题，并且提升自我的核心竞争力。前端需要学习的东西还有很多，入门简单，精通难，脚踏实地一步步学才能修成正果！
