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会有所帮忙。大家加油！