这是我参与「第五届青训营」笔记创作活动的第14天。
什么是Webpack
随着前端的快速发展，目前前端的开发已经变的越来越复杂了：
在日常开发会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑， 通过sass、less等方式来编写css样式代码；
比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；
比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；
-
打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
-
静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
-
模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
-
现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；
Webpack核心概念
1、Entry：入口(Entry)指示 Webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
2、Output：输出(Output)指示 Webpack 打包后的资源 bundles 输出到那里去，以及如何命名。
3、Loader：Loader 让 Webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能理解JavaScript）
4、Plugins：插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5、mode：模式(Mode)指示 Webpack 使用相应模式的配置。
核心流程
- 入口处理：从'entry'文件开始，启动编译流程
- 依赖解析：根据'require'和'import'等语句找到依赖资源
- 根据
module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容 - 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
不断进行2、3步后再进行第四步打包
总结
今天学习的Webpack在前段时间有刚好有学习过，在听这次课的时候能体会到，前端工程化的发展过程中，webpack的使用是必不可缺的一部分，webpack的普及和使用对前端发展来说是里程碑的存在。
