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 } ]})