webpack入门学习笔记01 —— webpack基本简介

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会有所帮助。你们加油！

下一篇: webpack入门学习笔记02 —— 初始化一个webpack项目