小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
1. 认识 Webpack
Webpack 是什么？Webpack 是一个前端的构建工具。为什么会出现这样一个构建工具呢？
因为随着前端的快速发展，目前前端的开发已经变得越来越复杂了：
- 比如开发过程中我们需要通过模块化的方式来开发；
- 比如会使用一些高级的特性来加快我们的开发效率或者安全性：比如通过
ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码； - 比如开发过程中，我们希望实时的监听文件的变化并且反映到浏览器上，以提高开发效率；
- 比如开发完成后我们还需要将代码进行压缩、合并以及其它相关的优化；
- 等等
但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：
-
这是因为目前前端开发我们通常都会直接使用三大框架（
Vue、React、Angular）来开发； -
但事实上，这三大框架的创建过程我们都是借助于它们各自提供的脚手架（CLI）工具（通过脚手架可以帮助我们搭建好整个项目的架构，之后我们就可以在这个基础上进行开发）的；
-
而这三大框架的脚手架（
Vue CLI、create-react-app、Angular CLI）又都是基于Webpack来帮助我们支持模块化、less、TypeScript、打包优化等的：
所以，我们应该学习一下 Webpack，以便更好地学习脚手架。
现在，我们已经知道了 Webpack 的重要性，下面，我们再来看下 Webpack 官网对它的解释：
翻译一下就是：webpack 的核心是一个用于现代 JavaScript 应用程序的静态模块打包工具。
我们来对上面的解释进行拆解：
- 打包工具（
bundler）：webpack可以帮助我们对代码进行打包，所以它是一个打包工具； - 静态的（
static）：这样表述的原因是我们最终可以将代码打包成静态资源（部署到静态服务器）； - 模块（
module）：webpack默认支持各种模块化开发，包括ECMAScript modules（在某些浏览器中才能使用）、CommonJS modules（在Node中才能使用）、AMD modules、Assets和WebAssembly modules1； - 现代的（
modern）：我们前面说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；
再来看一张官网的图：
这张图的含义是：我们可以编写一大堆有依赖关系的模块（代码文件，比如 js 文件、cjs 文件（CommonJS 文件）、hbs 文件（一种模板引擎的代码文件）、png 文件、jpg 文件、sass 文件、less 文件、ts 文件等等），但是这里面有些格式的代码文件如果直接交给浏览器，浏览器是不认识的，而 webpack 所做的就是将这一大堆的文件进行打包，打包后会生成静态资源，里面就都是些浏览器可以识别的文件格式（js 文件、css 文件、jpg 文件、png 文件等），然后让浏览器去访问这些打包后的文件代码就可以了。
你可能会问，既然浏览器不能直接访问我们编写的代码（比如 ts 文件代码、sass 文件代码），那我们为啥还要去编写这些代码呢？这是因为我们可以通过编写这些文件格式的代码，提升代码的安全性、健壮性以及提高代码的编写效率。所以我们在开发中常常会用到诸如 ts、sass、less 等技术，但是我们又希望浏览器到时候可以直接运行代码，那就必须把我们的代码进行打包之后再交给浏览器运行，而这个打包的过程我们就可以交给 webpack 这个工具来完成啦。
下面，我们将针对 Vue 项目的开发学习 Webpack 相关的知识。
