這篇文章主要介紹webpack代碼拆分的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

如果利用 webpack 將項(xiàng)目中的所有代碼打包在一起，很多時(shí)候是不適用的，因?yàn)榇a中有些東西我們總是希望將其拆分出來。比如：

1. 樣式表，希望利用 link 標(biāo)簽引入

2. 使用概率較低的模塊，希望后期需要的時(shí)候異步加載

3. 框架代碼，希望能利用瀏覽器緩存下部分不易變動(dòng)的代碼

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

按需加載拆分

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

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

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

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

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

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

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

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

如果這樣寫，那么 a 不會(huì)和 b 打包在一起，因?yàn)?a 已經(jīng)被打包在主代碼中了。

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

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

以上代碼中兩個(gè)模塊都依賴了 c 模塊，這個(gè)時(shí)候會(huì)拆分出兩個(gè)模塊，其中都包含了 c 模塊，因?yàn)樵趯?shí)際運(yùn)用中，以上兩個(gè)require.ensure的執(zhí)行順序不確定，執(zhí)行與否也不確定，因此需要將 c 模塊都打包進(jìn)去。

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

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');

ok，這樣以上兩個(gè)require.ensure拆出來的包就合并為同一個(gè)了。

CSS 拆分

開發(fā)者，可能希望能將工程中的所有引入的 CSS 拆分為單個(gè)文件，這樣可以利用緩存，且利用 CSS 和 JavaScript 并行加載，來加速 web 應(yīng)用。

使用css-loader

為了加載 css，這里需要用到 css-loader，配置方法如下：

module: {
  loaders: [{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'css-loader'
  }]
}

這樣在代碼中就可以寫如下代碼：

let css = require('./main.css');
console.log('' + css);

通過 require 一個(gè) css 得到其內(nèi)容，當(dāng)然了這里 require('./main.css') 實(shí)際得到的是一個(gè)對(duì)象，需要調(diào)用其 toString 方法將其轉(zhuǎn)換為字符串。在代碼中引用一段 css，這常常不是我們想要的。為此可以使用 style-loader 在代碼執(zhí)行起來的時(shí)候，會(huì)將這些 css 插入到 style 標(biāo)簽中，只是這里 css 還是存在于 js 中的，是后來動(dòng)態(tài)插入到頁面中的：

module: {
  loaders: [{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader'
  }]
}

更多時(shí)候，是希望將 css 拆分為單個(gè)文件，然后使用 link 標(biāo)簽嵌入到 html 中，CSS 和 JavaScript 可以并行加載，css 還可以被緩存下來。

使用extract-text-webpack-plugin來拆分 css

為了使用這個(gè)插件首先需要通過 npm 來安裝它：

npm i --save-dev extract-text-webpack-plugin

然后在 webpack 的配置文件中使用該插件：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = function () {
  return {
    entry: './index.js',
    output: {
      path: './build',
      filename: 'bundle.js'
    },
    module: {
      loaders: [{
        test: /\.css$/,
        exclude: /node_modules/,
        // 在 loader 中使用該插件
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }]
    },
    plugins: [
      // 將其添加在插件中
      new ExtractTextPlugin({ filename: 'bundle.css', disable: false, allChunks: true })
    ]
  }
}

需要注意的是，對(duì)于 webpack1 和 webpack2 這個(gè)插件的配置方法是不同的，差別比較細(xì)微，詳情請(qǐng)看官方文檔 extract text plugin for webpack 2

拆分業(yè)務(wù)代碼與框架代碼

通常一個(gè) web 應(yīng)用都會(huì)引用若干第三方庫，這些第三方庫通常比較穩(wěn)定不會(huì)經(jīng)常變動(dòng)，但是如果將業(yè)務(wù)代碼和框架代碼打包在了一起，這樣業(yè)務(wù)代碼每次變動(dòng)打包得到的結(jié)果都會(huì)變動(dòng)，及時(shí)只改變了一個(gè)字符，瀏覽器也無法利用緩存，必須全部重新加載。因此，何不將第三方庫單獨(dú)打包在一起呢？

這里舉個(gè)案例，一個(gè) react 項(xiàng)目中使用了react和react-dom這兩個(gè)包，我希望將他們打包在一起，將業(yè)務(wù)代碼打包在一起。

下面一步一步來：

1. 安裝 react 和 react-dom:

npm i react react-dom --save

2. 配置 entry，output 和 loader

先使用單入口，讓代碼工作起來。另外因?yàn)槭褂昧?react 所以要使用babel-loader來加載 js

// webpack.config.js

module.exports = {
  entry: 'index.js',
  output: {
    path: 'build/',
    filname: '[name]@[chunkhash].js'
  },
  module:{
    loaders:[{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel'
    }]
  }
}

3. 編寫業(yè)務(wù)代碼

index.js:

import React from 'react';
import ReactDOM from 'react-dom';


var Hello = React.createClass({
  render: function() {
    return 
Hello {this.props.name}
;
  }
});

ReactDOM.render(, document.getElementById('app'));

index.html: