基础篇——webpack基础用法（二）

  上一章节主要讲解了webpack的发展、简单的构建，这一章节主要讲解webpack的基础用法，初步搭建简单webpack工程，打包过程，该章节可能有点长，希望朋友们能够耐心阅读(●'◡'●)！

1.课程目录

TIM截图20200716081404.png

2.webpack核心概念之entry

entry⽤来指定 webpack 的打包⼊⼝

TIM截图20200716082222.png
注解：webpack是一个模块打包器，webpack会把前端项目中的.html、.js、.css、.sass、.less、.png...等文件看做成一个个模块，而这些模块又存在依赖关系。上图左半部分，webpack从最上方的.js入口文件进入项目，碰到依赖文件将其加入到打包流程中，从而形成一个依赖“树”，这个依赖“树”最后统一由webpack进行打包生成最终的静态资源（上图右半部分）。

（1）entry的用法 TIM截图20200716085312.png

1. 单入口：适合项目中只有一个入口，只有一个页面，也就是所说的单页应用（SPA）；
2. 多入口：适合于多页应用；

3.webpack核心概念之output

Output ⽤来告诉 webpack 如何将编译后的⽂件输出到磁盘

（1）Output的用法：单入口配置

TIM截图20200716090309.png
filename：打包后的文件名称；
path：打包后存入磁盘的目录；

（2）Output的用法：多入口配置

TIM截图20200716090553.png

4.webpack核心概念之loaders

（1）概念

TIM截图20200717092530.png

（2）常见loaders

TIM截图20200717092757.png

（3）loaders用法

TIM截图20200717093017.png

5.webpack核心概念之plugins

（1）概念

TIM截图20200717093332.png
注：loaders主要是用来解析webpack不能识别文件，让这些文件能够被webpack打包，plugins主要是用来增强webpack的功能。可以理解为下面一句话：

任何loaders没办法做的事情，可以通过plugins去完成

（2）常见的plugins

TIM截图20200717094006.png

（3）plugins用法

TIM截图20200717094140.png

6.webpack核心概念之mode

（1）概念

TIM截图20200717195322.png

（2）Mode内置函数

TIM截图20200717195513.png

7.总结

  这一章节主要介绍了webpack几个比较核心的api功能，下一章节主要讲解js、图片、样式、热更新、文件指纹策略、文件压缩等功能的简介。
来源：https://time.geekbang.org/course/intro/100028901?utm_source=pinpaizhuanqu&utm_medium=geektime&utm_campaign=guanwang&utm_content=0511&utm_term=guanwang