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

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、開州網(wǎng)站維護、網(wǎng)站推廣。

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

1. 樣式表，希望利用 link 標簽引入

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

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

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

按需加載拆分

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

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

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

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

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

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

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

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

如果這樣寫，那么 a 不會和 b 打包在一起，因為 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)
});

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

require.ensure 還可以傳入第三個參數(shù)，這個參數(shù)用來指定打包的包名，對于上面這種情況，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');

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

CSS 拆分

開發(fā)者，可能希望能將工程中的所有引入的 CSS 拆分為單個文件，這樣可以利用緩存，且利用 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 一個 css 得到其內(nèi)容，當然了這里 require('./main.css') 實際得到的是一個對象，需要調(diào)用其 toString 方法將其轉(zhuǎn)換為字符串。在代碼中引用一段 css，這常常不是我們想要的。為此可以使用 style-loader 在代碼執(zhí)行起來的時候，會將這些 css 插入到 style 標簽中，只是這里 css 還是存在于 js 中的，是后來動態(tài)插入到頁面中的：

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

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

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

為了使用這個插件首先需要通過 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 })
    ]
  }
}

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

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

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

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

下面一步一步來：

1. 安裝 react 和 react-dom:

npm i react react-dom --save

2. 配置 entry，output 和 loader

先使用單入口，讓代碼工作起來。另外因為使用了 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: