# webpack5 快速掌握
**Repository Path**: scofieldpls/webpack-learning
## Basic Information
- **Project Name**: webpack5 快速掌握
- **Description**: 通过demo演示webpack5的核心用法和概念，快速掌握webpack5
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: 01-introduction
- **Homepage**: https://gitee.com/scofieldpls/webpack-learning
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-07-16
- **Last Updated**: 2021-12-03
## Categories & Tags
**Categories**: Uncategorized
**Tags**: ES6, JavaScript, webpack
## README
# Webpack
## 0 前言
本项目主要内容包括`webpack`核心概念的解释以及基本用法示例代码，帮助学习者快速入门`webpack`
项目会分为7个章节来介绍`webpack`，不同章节的内容及代码会写在不同的分支下，对应关系如下
| 分支 | 内容 |
|-----------------|-------------------|
| 01-introduction | webpack的基本介绍及初步体验 |
| 02-config-dev | webpack的开发环境下的基本配置 |
| 03-config-pro | webpack的生产环境下的基本配置 |
| 04-config-optimization | webpack的优化配置 |
| 05-vue-cli | vue-cli的介绍 |
建议搭配官方文档进行学习
## 1 预备知识
1. 掌握 HTML、CSS、JavaScript
2. 了解 node 以及 npm、npx 相关知识
3. 会使用 git
## 2 webpack 是什么
> webpack是一个用于现代 JavaScript 应用程序的**静态模块打包工具（module bundler）**
这是官方文档的解释，那到底是什么意思呢？我们从以下三个名词进行解释：打包、静态资源、模块
### 2.1 打包
以一个`html`页面举例来说
```html
```
这个`html`页面通过`script`标签引入了3个`JavaScript`文件，并且它们之间有一定的依赖关系，比如`c.js`依赖于`b.js`，`b.js`依赖于`a.js`
因为有3个`js`文件，所以浏览器需要发送3次`http`请求来获取这个3个文件，并且一个文件由于网络而延迟加载会影响整个页面的显示。这还只是3个`js`文件，对于一个大型项目来说，如果`js`的数量增加到几十个甚至上百个，那么延时问题会变得相当严重。
那怎么解决这个问题呢？很简单，把所有相互依赖的`js`文件合并成一个`js`文件就好了。这样只需要发送1次请求就能加载这个`js`文件，大大加快了页面的加载速度。
但是问题又来了，对于一个由几十个甚至上百个`js`文件合并而成的`js`文件，其代码量及代码复杂程度是难以想象的，这样的代码是无法维护的。
所以在开发阶段，我们仍旧是将代码分开成一个个小的`js`文件，有助于开发和维护。在开发完成以后，由`webpack`来将这些`js`文件合并成一个文件，这个合并的过程就叫做**打包**。
当然上面仅是用`js`举例，`webpack`支持多种类型的文件的打包，包括`js`、`css`、`jpg`等
### 2.2 静态资源
所谓静态资源，就是在开发阶段，可以被直接引用的资源
相对地，所谓动态资源，就是项目上线之后，浏览器在运行时才能动态获取的文件，它不能在开发阶段被直接引用
### 2.3 模块
`JavaScript`在早期的设计中没有模块、包、类的概念，开发者需要模拟出类似的功能，来隔离、组织复杂的`JavaScript`代码，我们称为模块化
2.1中所述的3个`js`文件就是3个模块，所谓模块就是一个实现特定功能的文件，他可以被其他模块引用
### 2.4 总结
理解了上述3个概念，就可以大概理解何为**静态模块打包工具**
简单说来，就是一个复杂的项目在开发阶段，会被拆分成一个个具有独立功能的静态资源模块，而`webpack`这个工具会在项目开发完成后将这些独立的模块组织、打包到一起，然后项目才能上线发布
另外，值得一提的是，`webpack`在打包过程中，会在内部构建一个**依赖关系图**，这个依赖图对应映射到项目所需的每个模块。所谓的依赖关系图就是`webpack`根据每个模块之间的依赖关系递归生成的一张内部逻辑图，有了这张依赖关系图，`webpack`就能把所有需要的模块打包成一个文件了，这个文件称为`bundle`文件（bundle的中文意思就是包）
## 3 webpack 的5个核心概念
对于这几个概念，目前大致有印象即可，后面会进一步解释说明
### 3.1 入口 Entry
入口指示`webpack`以哪个文件为入口起点开始打包
### 3.2 输出 Output
输出指示`webpack`打包后的文件的输出路径以及命名
### 3.3 Loader
`Loader`帮助`webpack`处理非`JavaScript`文件（`webpack`自身只能处理`JavaScript`）
### 3.4 插件 Plugins
插件可以让`webpack`能处理更多任务，插件的范围包括：打包优化、压缩、重新定义环境中的变量等
### 3.5 模式 Mode
模式指示`webpack`使用相应模式的配置，包括`development`（开发模式）和`production`（生产模式）
## 4 Hello Webpack
下面，我们用一个简单的demo来体验一下`webpack`的使用
详细步骤见HelloWebpack.md