使用Webpack启动你的Vue.js应用

在这篇文章我将为大家展示Webpack是如何应用在Vue app中的，包括

1. 单文件组件

2. 优化Vue项目的构建

3. 浏览器缓存管理

4. 代码分割

关于Vue-cli

如果你是使用vue-cli创建的项目整体框架，那么默认就提供了Webpack的配置文件。Webpack已经很好的集成到你的项目中了，我也没有更进一步提升的优化的建议可以提供！

那么既然提供了一个开箱即用的工具，你可能对到底是如何运行工作的不是很了解，对吗？在本篇文章我们将讨论与vue-cli提供的默认配置类似的功能。

1.单文件组件

Vue一个非常明显的特点是它使用HTML作为组件的模板。这也就必然伴随着一个一直存在的问题，不管是你将组件模板的HTML标记比较笨拙的放置于JavaScript字符串中，还是将模板和组件的定义放置于单独的文件中，管理起来都比较麻烦。

Vue提供了一个非常棒的解决方案单文件组件（Single File Components SFCs)，单文件组件将模板，组件定义以及CSS都统一整齐的放置在一个.vue文件内。

<template> <div id="my-component">...</div></template><script> export default {...}</script><style> #my-component {...}</style>

通过Webpack的vue-loader插件，我们可以在项目中灵活的使用SFCs。这个插件会将SFCs的模板、组件定义以及样式进行拆分成块并传输给特定的Webpack loader进行后续处理，例如：script块将交给`bable-loader`处理，template快将交给Vue自己的`vue-template-loader`处理它会将模板转换并传输给`render`函数。

vue-loader最后的输出会是一个包含在Webpack bundle文件里的JavaScript模块。

一个非常典型的vue-loader配置如下：

module: { rules: [ { test: /.vue$/, loader: "vue-loader", options: { loaders: { // Override the default loaders } } }, ]}

2.优化Vue项目的构建

## 只在运行时构建

如果你的Vue应用没有HTML模板，只是使用到了render函数，那么你没有必要使用到Vue的模板编译功能。那么就可以在Webpack构建是忽略这部分的代码降低打包后的文件大小。

*请记住在开发模式下单文件组件是被预编译到render函数的*

Vue提供了一个`runtime-only`的库，这个库包含了除模板编译外的所有功能，库名是`vue.runtime.js`。它的搭建比完整版本要小20KB，因此如果可以使用这个版本那么非常值得这么做。

默认情况下就是使用的runtime-only，因此每当我们在项目中使用`import vue from "vue";`就是使用的这个版本。通过配置`alias`也可以改变这种方式：

resolve: { alias: { "vue$": "vue/dist/vue.esm.js" // Use the full build }},

## 在生产环境上剥离警告和错误信息

在生产环境上降低最终打包文件大小的另外一种方法是移除警告和错误信息。这样最终打包的文件里就不再有非必需的代码，进而提高整个文件的加载速度。

如果你去检查Vue的源码你会发现警告信息处理是根据当前环境变量`process.env.NODE_ENV`来进行判断的：

if (process.env.NODE_ENV !== "production") { warn(("Error in " + info + ": "" + (err.toString()) + """), vm);}

如果`process.env.NODE_ENV `设置为`production`那么这部分代码在构建的时候就会自动的被剥离。

可以使用`DefinePlugin`来设置`process.env.NODE_ENV `的值，也可以使用`UglifyJsPlugin`插件将代码进行最小化和移除不使用的代码块的处理操作。

if (process.env.NODE_ENV === "production") { module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ "process.env": { NODE_ENV: ""production"" } }), new webpack.optimize.UglifyJsPlugin() ])}

3.浏览器缓存管理

用户浏览器的缓存策略是浏览器会判断网页文件是否已经在本地有未过期的副本，如果存在则浏览器会使用本地的缓存文件而不会去服务器重新下载。

如果将所有的代码打包在一个文件里面，那么任何微小的改变都意味着整个打包文件都得重新下载。理想情况下是用户尽可能的少下载，多使用本地缓存副本。那么最明智的做好就是将经常需要变动的文件与很少变动的文件做分离。

## 第三方库文件

使用*Common Chunks plugin*能够将第三方库文件（如：Vue.js库）从你的应用代码的抽出为一个独立的文件。

我们可以配置插件判断文件依赖是否是来自于`node_modules`文件夹，如果是的，那么将这些文件打包输出到一个独立的文件`vendor.js`

new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: function (module) { return module.context && module.context.indexOf("node_modules") !== -1; }})

## 文件指纹

当构建生成新的打包文件，我们怎么才能销毁浏览器的缓存或是说怎么才能使缓存失效从而从服务器加载最新的文件呢？默认情况下只有当缓存文件失效过期，或是手动清空缓存后，浏览器才会从服务器请求资源文件。当服务器表名文件已经被改变后文件将被重新下载（否则服务器会返回304 Not Modified)。

为避免不必要的请求判断，我们可以在文件发生变化时修改文件的名称这样强制浏览器重新下载。实现该功能一个简单的办法就是将“指纹”hash信息添加到文件名里，例如：