建議在github閱讀
注意：example1(對應于目錄example1，修改webpack.config.js中的配置就可以了，以下例子相同)
打包成的main.js中內容是:
webpackJsonp([0,1],[/* 0 *//***/ function(module, exports, __webpack_require__) { __webpack_require__(1); __webpack_require__(2);/***/ },/* 1 *//***/ function(module, exports, __webpack_require__) { __webpack_require__(2); var chunk1=1; exports.chunk1=chunk1;/***/ },/* 2 *//***/ function(module, exports) { var chunk2=1; exports.chunk2=chunk2;/***/ }]);在example2中我們配置了如下:
minChunks:2我們兩個入口文件中公有的chunk1.js和chunk2.js被打印到chunk.js中!
/******/ (function(modules) { // webpackBootstrap/******/ // install a JSONP callback for chunk loading/******/ var parentJsonpFunction = window["webpackJsonp"];/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {/******/ // add "moreModules" to the modules object,/******/ // then flag all "chunkIds" as loaded and fire callback/******/ var moduleId, chunkId, i = 0, callbacks = [];/******/ for(;i < chunkIds.length; i++) {/******/ chunkId = chunkIds[i];/******/ if(installedChunks[chunkId])/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);/******/ installedChunks[chunkId] = 0;/******/ }/******/ for(moduleId in moreModules) {/******/ modules[moduleId] = moreModules[moduleId];/******/ }/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);/******/ while(callbacks.length)/******/ callbacks.shift().call(null, __webpack_require__);/******/ if(moreModules[0]) {/******/ installedModules[0] = 0;/******/ return __webpack_require__(0);/******/ }/******/ };/******/ // The module cache/******/ var installedModules = {};/******/ // object to store loaded and loading chunks/******/ // "0" means "already loaded"/******/ // Array means "loading", array contains callbacks/******/ var installedChunks = {/******/ 2:0/******/ };/******/ // The require function/******/ function __webpack_require__(moduleId) {/******/ // Check if module is in cache/******/ if(installedModules[moduleId])/******/ return installedModules[moduleId].exports;/******/ // Create a new module (and put it into the cache)/******/ var module = installedModules[moduleId] = {/******/ exports: {},/******/ id: moduleId,/******/ loaded: false/******/ };/******/ // Execute the module function/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);/******/ // Flag the module as loaded/******/ module.loaded = true;/******/ // Return the exports of the module/******/ return module.exports;/******/ }/******/ // This file contains only the entry chunk./******/ // The chunk loading function for additional chunks/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {/******/ // "0" is the signal for "already loaded"/******/ if(installedChunks[chunkId] === 0)/******/ return callback.call(null, __webpack_require__);/******/ // an array means "currently loading"./******/ if(installedChunks[chunkId] !== undefined) {/******/ installedChunks[chunkId].push(callback);/******/ } else {/******/ // start chunk loading/******/ installedChunks[chunkId] = [callback];/******/ var head = document.getElementsByTagName('head')[0];/******/ var script = document.createElement('script');/******/ script.type = 'text/Javascript';/******/ script.charset = 'utf-8';/******/ script.async = true;/******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"main","1":"main1"}[chunkId]||chunkId) + ".js";/******/ head.appendChild(script);/******/ }/******/ };/******/ // expose the modules object (__webpack_modules__)/******/ __webpack_require__.m = modules;/******/ // expose the module cache/******/ __webpack_require__.c = installedModules;/******/ // __webpack_public_path__/******/ __webpack_require__.p = "";/******/ })/************************************************************************//******/ ([/* 0 */,/* 1 *//***/ function(module, exports, __webpack_require__) { __webpack_require__(2); var chunk1=1; exports.chunk1=chunk1;/***/ },/* 2 *//***/ function(module, exports) { var chunk2=1; exports.chunk2=chunk2;/***/ }/******/ ]);上面的配置就可以把jquery,vue分別打包到一個獨立的chunk中，分別為common1.js,common2.js。同時把main1,main的公共業務模塊打包到chunk.js中,而其他非公共的業務代碼全部保留在main.js和main1.js中。
注意：webpack用插件CommonsChunkPlugin進行打包的時候，將符合引用次數(minChunks)的模塊打包到name參數的數組的第一個塊里（chunk）,然后數組后面的塊依次打包(查找entry里的key,沒有找到相關的key就生成一個空的塊)，最后一個塊包含webpack生成的在瀏覽器上使用各個塊的加載代碼，所以頁面上使用的時候最后一個塊必須最先加載,我們看看最后一個塊，也就是common2.js的內容頭部：
看到這里你就會明白為什么他要最后加載了把。
這樣我們的業務共享代碼會提取到common.js中，如下:
webpackJsonp([4,5],[//第一個參數是一個數組，數組中第一個元素是該chunkId，而其余元素是該chunk依賴的其他模塊/* 0 */,/* 1 */,/* 2 *//***/ function(module, exports, __webpack_require__) { __webpack_require__(3); var chunk1=1; exports.chunk1=chunk1;/***/ },/* 3 *//***/ function(module, exports) { var chunk2=1; exports.chunk2=chunk2;/***/ }]);而我們的load.js中僅僅是用于加載其他chunk代碼的函數,所以必須在最后加載才行：
/******/ (function(modules) { // webpackBootstrap/******/ // install a JSONP callback for chunk loading/******/ var parentJsonpFunction = window["webpackJsonp"];/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {/******/ // add "moreModules" to the modules object,/******/ // then flag all "chunkIds" as loaded and fire callback/******/ var moduleId, chunkId, i = 0, callbacks = [];/******/ for(;i < chunkIds.length; i++) {/******/ chunkId = chunkIds[i];/******/ if(installedChunks[chunkId])/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);/******/ installedChunks[chunkId] = 0;/******/ }/******/ for(moduleId in moreModules) {/******/ modules[moduleId] = moreModules[moduleId];/******/ }/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);/******/ while(callbacks.length)/******/ callbacks.shift().call(null, __webpack_require__);/******/ if(moreModules[0]) {/******/ installedModules[0] = 0;/******/ return __webpack_require__(0);/******/ }/******/ };/******/ // The module cache/******/ var installedModules = {};/******/ // object to store loaded and loading chunks/******/ // "0" means "already loaded"/******/ // Array means "loading", array contains callbacks/******/ var installedChunks = {/******/ 5:0/******/ };/******/ // The require function/******/ function __webpack_require__(moduleId) {/******/ // Check if module is in cache/******/ if(installedModules[moduleId])/******/ return installedModules[moduleId].exports;/******/ // Create a new module (and put it into the cache)/******/ var module = installedModules[moduleId] = {/******/ exports: {},/******/ id: moduleId,/******/ loaded: false/******/ };/******/ // Execute the module function/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);/******/ // Flag the module as loaded/******/ module.loaded = true;/******/ // Return the exports of the module/******/ return module.exports;/******/ }/******/ // This file contains only the entry chunk./******/ // The chunk loading function for additional chunks/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {/******/ // "0" is the signal for "already loaded"/******/ if(installedChunks[chunkId] === 0)/******/ return callback.call(null, __webpack_require__);/******/ // an array means "currently loading"./******/ if(installedChunks[chunkId] !== undefined) {/******/ installedChunks[chunkId].push(callback);/******/ } else {/******/ // start chunk loading/******/ installedChunks[chunkId] = [callback];/******/ var head = document.getElementsByTagName('head')[0];/******/ var script = document.createElement('script');/******/ script.type = 'text/javascript';/******/ script.charset = 'utf-8';/******/ script.async = true;/******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"jquery","1":"main","2":"main1","3":"vue","4":"common"}[chunkId]||chunkId) + ".js";/******/ head.appendChild(script);/******/ }/******/ };/******/ // expose the modules object (__webpack_modules__)/******/ __webpack_require__.m = modules;/******/ // expose the module cache/******/ __webpack_require__.c = installedModules;/******/ // __webpack_public_path__/******/ __webpack_require__.p = "";/******/ })/************************************************************************//******/ ([]);下面的配置會把main.js和main1.js公共的業務代碼打包到jquery.js中:
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");module.exports = { entry: { main: process.cwd()+'/example5/main.js', main1: process.cwd()+'/example5/main1.js', jquery:["jquery"] //minChunks: Infinity時候框架代碼依然會被單獨打包成一個文件 }, output: { path: process.cwd() + '/dest/example5', filename: '[name].js' }, plugins: [ new CommonsChunkPlugin({ name: "jquery", minChunks:2//被引用兩次及以上 }) ]};如果把上面的minChunks修改為Infinity，那么chunk1和chunk2(公有的業務邏輯部分,在main.js和main1.js中require進來)都打包到main.js,main1.js里，也就是共有邏輯不會抽取出來作為一個單獨的chunk,而是打包到jquery.js中!注意：此處的jquery必須在最先加載，因為window.webpackJsonp函數是被打包到jquery.js中的!
下面的配置表示：只有在main.js和main1.js中都引用的模塊才會被打包的到公共模塊（這里即jquery.js）
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");module.exports = { entry: { main: process.cwd()+'/example6/main.js', main1: process.cwd()+'/example6/main1.js', jquery:["jquery"] }, output: { path: process.cwd() + '/dest/example6', filename: '[name].js' }, plugins: [ new CommonsChunkPlugin({ name: "jquery", minChunks:2, chunks:["main","main1"] }) ]};此時你會發現在我們的jquery.js的最后會打包進來我們的chunk1.js和chunk2.js
/* 2 *//***/ function(module, exports, __webpack_require__) { __webpack_require__(3); var chunk1=1; exports.chunk1=chunk1;/***/ },/* 3 *//***/ function(module, exports) { var chunk2=1; exports.chunk2=chunk2;/***/ }參考資料：
webpack打包策略分析
webpack CommonsChunkPlugin詳細教程
新聞熱點
疑難解答
