3.4 Webpack

随着SPA（Single Page App）单页应用的发展，可以发现，使用的js/css/png等文件特别多，比较难管理，文件夹结构也很容易混乱。很多时候我们希望项目可以具备压缩css，压缩js，正确地处理各种js/css的import，以及相关的模板html文件。

在最开始的一段时间里，可以说每个SPA项目发展到一定规模，都会遇到这样的瓶颈和痛点。为了解决这个问题，就出现了Webpack，其官方网站为https://webpack.js.org/，github为https://github.com/webpack/ webpack。

Webpack官方网站页面如图3-22所示。

图3-22 Webpack官方页面

Webpack是一个打包工具，可以把js、css、node module、coffeescrip、scss/less、图片等都打包在一起，简直是模块化开发SPA福音。因此，现在几乎所有的SPA项目、JS项目都会用到Webpack。

在前面的入门知识中，我们看到Vue.js只需要引入一个外部的js文件就可以工作了。不过，在实际开发中，情况就复杂了很多倍，我们都是统一使用Webpack + Vue.js的方式来做项目的，这样才可以做到“视图”“路由”“component”等的分离，以及快速打包、部署及项目上线。

3.4.1 Webpack功能

Webpack功能非常强大，对各种技术都提供了支持，仿佛是一个“万能胶水”，把所有的技术都结合到了一起。

1. 对文件的支持

•支持普通文件

•支持代码文件

•支持文件转url（支持图片）

2. 对JSON的支持

•支持普通JSON

•支持JSON5

•支持CSON

3. 对JS预处理器的支持

•支持普通JavaScript

•支持Babel（使用ES2015+）

•支持Traceur（使用ES2015+）

•支持Typescript

•支持Coffeescript

4. 对模板的支持

•支持普通HTML

•支持Pug模板

•支持JADE模板

•支持Markdown模板

•支持PostHTML

•支持Handlebars

5. 对Style的支持

•支持普通style

•支持import

•支持LESS

•支持SASS/SCSS

•支持Stylus

•支持PostCSS

6. 对各种框架的支持

•支持Vue.js

•支持Angular2

•支持Riot

3.4.2 Webpack安装与使用

Webpack安装命令如下：

$ npm install --save-dev webpack

因为Webpack自身是支持Vue.js的，所以Webpack与Vue.js已经结合到很难分清谁是谁，我们就索性不区分。知道做什么事情需要运行什么命令就可以了。

在接下来内容中，读者会看到Webpack+Vue.js共同开发的方法和步骤。