最近在學習VUE的時候接觸到了webpack，今天就留個小筆記，介紹一下webpack代碼拆分

如果利用 webpack 將項目中的所有代碼打包在一起，很多時候是不適用的，因為代碼中有些東西我們總是希望將其拆分出來。比如：

樣式表，希望利用 link 標簽引入 使用概率較低的模塊，希望后期需要的時候異步加載 框架代碼，希望能利用瀏覽器緩存下部分不易變動的代碼

下面是我在閱讀 webpack 的官方文檔時候，記錄的一些筆記，部分地方使用了自己的話來講，力圖讓它顯得更易懂。

按需加載拆分

webpack 可以幫助我們將代碼分成不同的邏輯塊，在需要的時候加載這些代碼。

使用 require.ensure() 來拆分代碼

require.ensure() 是一種使用 CommonJS 的形式來異步加載模塊的策略。在代碼中通過 require.ensure([<fileurl>]) 引用模塊，其使用方法如下：

代碼如下:
require.ensure(dependencies: String[], callback: function(require), chunkName: String)

第一個參數指定依賴的模塊，第二個參數是一個函數，在這個函數里面你可以使用 require 來加載其他的模塊，webpack 會收集 ensure 中的依賴，將其打包在一個單獨的文件中，在后續用到的時候使用 jsonp 異步地加載進去。

require.ensure(['./a'], function(require){  let b = require('./b');  let a = require('./a');  console.log(a+b)});

以上代碼，a 和 b 會被打包在一起，在代碼中執行到這段代碼的時候，會異步地去加載，加載完成后執行函數里面的邏輯。

let a = require('./a');require.ensure(['./a'], function(require){  let b = require('./b');  console.log(a+b)});

如果這樣寫，那么 a 不會和 b 打包在一起，因為 a 已經被打包在主代碼中了。

require.ensure(['./c'], function(require){  let a = require('./a');  console.log(a)});require.ensure(['./c'], function(require){  let b = require('./b');  console.log(b)});

以上代碼中兩個模塊都依賴了 c 模塊，這個時候會拆分出兩個模塊，其中都包含了 c 模塊，因為在實際運用中，以上兩個 require.ensure 的執行順序不確定，執行與否也不確定，因此需要將 c 模塊都打包進去。

require.ensure 還可以傳入第三個參數，這個參數用來指定打包的包名，對于上面這種情況，c 模塊被打包入了兩個包中，如果事先明確這兩個包都會被使用，那么不妨將這兩個包合并為一個，這樣就不會有 c 模塊被打包兩次的問題了，所以可以將 chunkName 指定為同一個名字。

require.ensure(['./c'], function(require){  let a = require('./a');  console.log(a)}, 'd');require.ensure(['./c'], function(require){  let b = require('./b');  console.log(b)}, 'd');