上一章节主要讲解了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
TIM截图20200716085312.png
- 单入口：适合项目中只有一个入口，只有一个页面，也就是所说的单页应用（SPA）；
- 多入口：适合于多页应用；
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
