Webpack是开发Vue.js单页面应用(SPA)最基本的工具。通过管理负责的构建步骤能够使开发工作流非常的简单，同时也能够优化应用的大小提升应用的性能。

在这篇文章我将为大家展示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文件内。

通过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信息添加到文件名里，例如：

当文件内容发生变化的时候 `Common Chunks plugin`会发出生成一个“chunkhash”。Webpack在进行文件输出的时候可以使用这个hash值将它添加到输出的文件名里：

output: { filename: '[name].[chunkhash].js'},

当我们如此配置后，打包生成的文件就会发生变化，类似*app.3b80b7c17398c31e4705.js*

## 自动注入打包文件

当我们安装上面提及的方法为文件添加指纹信息后，那么在每个引用文件的地方每当打包文件发生变化我们都得去更新引用信息，因为生成的文件名每次都会发生变化(hash值会改变)。

``，如果全部由人工手动的方式来做那么无疑这是个艰巨的任务，幸运的是我们可以使用*HTML Webpack Plugin *。这个插件可以在编译运行时将相关引用(打包生成的文件)自动注入到html文件中。

一开始我们需要将相关引用从index.html中移除

index.html

  test-6

将*HTML Webpack Plugin*添加到配置信息

new HtmlWebpackPlugin({ filename: 'index.html' template: 'index.html', inject: true, chunksSortMode: 'dependency'}),

至此，构建生成的带有指纹信息的文件将自动注入到index.html文件中。

4.代码分割

默认情况下，Webpack将会把所有的应用代码打包到一个文件里面。但是当我们的应用有多个页面的时候将各自的代码生成到独立的文件会更加高效，当页面加载时只加载各自需要的文件。

Webpack提供了 "code splitting" 的功能可以实现此要求。

## 异步组件

与将定义对象信息放置作为第二个参数相比不同，异步组件需要使用到Promise，例如：

Vue.component('async-component', function (resolve, reject) { setTimeout(() => { resolve({ // Component definition including props, methods etc. }); }, 1000)})

## require

当需要加载使用异步组件的时候可以使用Webpack的require语法，这将会告诉Webpack将异步组件打包到一个独立的文件，Webpack将通过AJAX的方式加载这个文件，因此在代码里可以这样写：

Vue.component('async-component', function (resolve) { require(['./AsyncComponent.vue'], resolve)});

## 延迟加载

在Vue.js应用中我们会使用*vue-router*来管理将我们的单页面应用转换为多个页面，延迟加载是使用Vue和Webpack实现代码分割的方式

const HomePage = resolve => require(['./HomePage.vue'], resolve);const rounter = new VueRouter({ routes: [ { path: '/', name: 'HomePage', component: HomePage } ]})

来源：[4 Ways To Boost Your Vue.js App With Webpack](https://vuejsdevelopers.com/2017/06/18/vue-js-boost-your-app-with-webpack/?fbclid=IwAR1E-I2lTdttUGgjHAU-aVtTWoDN0qYeVtDFlKEpevbGGlqEZ4taJIGyT4c)

作者：Anthony Gore