共计 1256 个字符，预计需要花费 4 分钟才能阅读完成。
1. 写在后面
很多从事前端开发的程序员，都会接触到 webpack 十分相熟的概念，然而我想很多人对 webpack 只是只知其一; 不知其二，晓得这是一个打包器，能够将咱们编写的 Vue 代码、React 代码打包编译成原生的 JS 代码，不便浏览器辨认。
然而对于 webpack 更底层的常识，比方：如何配置 webpack，webpack 为什么能够对咱们的代码进行打包编译等，理解甚少。
所以借着这次学习 webpack 的机会，写一些文章，从一个前端小白的角度登程，一步步理解 webpack 的相干常识。心愿这些文章能够对那些前端小白有多帮忙。写得不好的中央，也请大家多多批评。
2. webpack 根本简介
什么是 webpack 呢，上面咱们引出 官网定义 ：
webpack 是一个古代 JavaScript 应用程序的动态模块打包器 (module bundler)。当 webpack 解决应用程序时，它会递归地构建一个依赖关系图 (dependency graph)，其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 bundle。
说的直白一点，就是讲咱们的代码进行编译打包，变成可能被浏览器辨认的前端脚本。就拿一个 Vue 我的项目为例：
一开始咱们是用 Vue-cli 脚手架 疾速搭建一个我的项目，随后在我的项目中都是采纳 Vue 语法来编写咱们的我的项目，不仅如此，咱们还会应用 ES6 语法，还会应用 SCSS 等 CSS 预处理器等等。
这些语法咱们是相熟的，然而浏览器不意识呀，浏览器可能辨认的是原生 JS 语法，而且就目前状况来说，只能辨认 ES5 语法，不能辨认咱们应用的 ES6 语法。这就意味着，咱们的 Vue 我的项目是跑不起来的。这该怎么办呢？
这个时候 webpack 就开始施展它的作用了，webpack 通过剖析 Vue 语法、理清代码模块之前的依赖关系、剖析 SCSS 预处理器、剖析我的项目中援用的图片等动态资源等，将这些浏览器不辨认的语法进行打包编写编译，最终打包输入 .js、.css、.jpg、.png 等可能被浏览器辨认的语法和文件。如此一来，咱们的我的项目就能够顺利地在浏览器下面跑起来了。
3. webpack 的作用总结
联合下面的简略介绍，咱们来总结一下 webpack 的作用：
代码转换
webpack 能够将 ES6 语法转换为 ES5 语法，能够将 LESS、SASS 语法转换成 CSS 语法
文件优化
在 webpack 打包的过程中，能够合并文件，压缩文件体积
代码宰割、模块合并
在开发的过程中，将一些公共的模块进行抽离，造成独自的模块，不便其余模块进行调用
主动刷新
即咱们相熟的热更新，在开发过程中，webpack 会帮咱们启动一个本地服务，每当产生新代码的时候，该服务会主动刷新，然咱们看到最新的页面
代码校验
在开发过程中，webpack 能够帮忙咱们查看代码语法标准，缩小 bug 的数量
主动公布
我的项目开发实现之后，咱们能够借助 webpack 帮忙咱们主动公布代码，部署到服务器上
4. 后记
以上就是 webpack 学习笔记的开篇语，心愿接下来的一系列笔记，对你了解 webpack 会有所帮忙。大家加油！