1.demo结构：

2.package.json配置：

  1. {
  2.   "name": "webpack-simple-demo",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "webpack": "webpack"
  8.   },
  9.   "author": "",
  10.   "license": "ISC",
  11.   "dependencies": {
  12.     "jquery": "^3.1.0",
  13.     "vue": "^1.0.26"
  14.   },
  15.   "devDependencies": {
  16.     "css-loader": "^0.24.0",
  17.     "style-loader": "^0.13.1",
  18.     "webpack": "^1.13.2",
  19.     "webpack-dev-server": "^1.15.1"
  20.   }
  21. }

3.多种打包情况(未使用CommonsChunkPlugin)

(1)单一入口，模块单一引用

webpack.config.js

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.   entry:
  4.   {
  5.     main:'./main.js',
  6.   },
  7.   output: {
  8.     path:__dirname+'/dist',
  9.     filename: 'build.js'
  10.   },
  11.   plugins: [
  13.   ]
  14. };

main.js

  1. require("jquery");

demo目录下运行命令行 webpack或npm run webpack



jquery模块被一起打包到build.js

(2)单一入口，模块重复引用

webpack.config.js不变，main.js：

  1. require("./chunk1");
  2. require("./chunk2");

chunk1.js:

  1. require("./chunk2");
  2. var chunk1=1;
  3. exports.chunk1=chunk1;

chunk2.js:

  1. var chunk2=1;
  2. exports.chunk2=chunk2;

main.js引用了chunk1、chunk2,chunk1又引用了chunk2，打包后：

build.js:

  1.  ...省略webpack生成代码
  2. /************************************************************************/
  3. /******/ ([
  4. /* 0 */
  5. /***/ function(module, exports, __webpack_require__) {
  7. 	__webpack_require__(1);
  8. 	__webpack_require__(2);
  10. /***/ },
  11. /* 1 */
  12. /***/ function(module, exports, __webpack_require__) {
  14. 	__webpack_require__(2);
  15. 	var chunk1=1;
  16. 	exports.chunk1=chunk1;
  18. /***/ },
  19. /* 2 */
  20. /***/ function(module, exports) {
  22. 	var chunk2=1;
  23. 	exports.chunk2=chunk2;
  25. /***/ }
  26. /******/ ]);

(3)多入口，模块单一引用，分文件输出

webpack.config.js

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.   entry:
  4.   {
  5.     main:'./main.js',
  6.     main1:'./main1.js'
  7.   },
  8.   output: {
  9.     path:__dirname+'/dist',
  10.     filename: '[name].js'
  11.   },
  12.   plugins: [
  14.   ]
  15. };

打包后文件main.js,main1.js 内容与（2）build.js一致

（4）多入口，模块单一引用，单一文件输出

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.   entry:
  4.   {
  5.     main:'./main.js',
  6.     main1:'./main1.js'
  7.   },
  8.   output: {
  9.     path:__dirname+'/dist',
  10.     filename: 'buid.js'
  11.   },
  12.   plugins: [
  14.   ]
  15. };

build.js与（2）一致

（5）多入口，模块重复引用，单文件输出

webpack.config.js与（4）一致

main.js

  1. require("./chunk1");
  2. require("./chunk2");
  3. exports.main=1;

main1.js

  1. require("./chunk1");
  2. require("./chunk2");
  3. require("./main");

报错：ERROR in ./main1.js

Module not found: Error: a dependency to an entry point is not allowed

@ ./main1.js 3:0-17

4.使用CommonsChunkPlugin

(1)单一入口，模块单一引用，分文件输出:

webpack.config.js

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.   entry:
  4.   {
  5.     main:'./main.js',
  6.   },
  7.   output: {
  8.     path:__dirname+'/dist',
  9.     filename: '[name].js'//不使用[name]，并且插件中没有filename，这输出文件中只用chunk.js的内容，
  10.     main.js的内容不知跑哪里去了
  11.   },
  12.   plugins: [
  13.    new CommonsChunkPlugin({
  14.        name:"chunk",
  15.        filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字
  16.    })
  17.   ]
  18. };

main.js

  1. require("./chunk1");
  2. require("./chunk2");
  3. require("jquery");



输出文件main.js chunk.js,chunk1.js,chunck2.js,jquery都被打包到main.js里，好像并没有什么卵用，但是页面上使用的时候chunk.js必须在mian.js前引用

将chunk1.js,chunck2.js打包到chunk.js:

webpack.config.js

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.   entry:
  4.   {
  5.     main:'./main.js',
  6.     chunk: ["./chunk1", "./chunk2"],//插件中name,filename必须以这个key为值
  7.   },
  8.   output: {
  9.     path:__dirname+'/dist',
  10.     filename: '[name].js'//不使用[name]，并且插件中没有filename，
  11.     这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了
  12.   },
  13.   plugins: [
  14.    new CommonsChunkPlugin({
  15.        name:"chunk",
  16.       // filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字
  17.    })
  18.   ]
  19. };

(1)单一入口，模块重复引用，分文件输出(单一入口CommonsChunkPlugin能否将多次引用的模块打包到公共模块呢？)：

webpack.config.js

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.   entry:
  4.   {
  5.     main:'./main.js',
  6.     //main1:'./main1.js',
  7.   },
  8.   output: {
  9.     path:__dirname+'/dist',
  10.     filename: '[name].js'//不使用[name]，并且插件中没有filename，
  11. 这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了
  12.   },
  13.   plugins: [
  14.    new CommonsChunkPlugin({
  15.        name:"chunk",
  16.       // filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字
  17.       minChunks:2
  18.    })
  19.   ]
  20. };

main.js

  1. require("./chunk1");
  2. require("./chunk2");

chunk1.js

  1. require("./chunk2");
  2. var chunk1=1;
  3. exports.chunk1=chunk1;

chunk2模块被引用了两次

打包后，所有模块还是被打包到main.js中

(3)多入口，模块重复引用，分文件输出（将多次引用的模块打包到公共模块）

webpack.config.js

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.   entry:
  4.   {
  5.     main:'./main.js',
  6.     main1:'./main1.js',
  7.   },
  8.   output: {
  9.     path:__dirname+'/dist',
  10.     filename: '[name].js'//不使用[name]，并且插件中没有filename，
  11.     这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了
  12.   },
  13.   plugins: [
  14.    new CommonsChunkPlugin({
  15.        name:"chunk",
  16.       // filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字
  17.       minChunks:2
  18.    })
  19.   ]
  20. };

main.js,main1.js里都引用chunk1,chunk2.

打包后：

chunk1,chunk2被打包到chunk.js,不再像3(3)chunk1,chunk2分别被打包到mian,mian1中。

5.将公共业务模块与类库或框架分开打包

webpack.config.js

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.     entry: {
  4.         main: './main.js',
  5.         main1: './main1.js',
  6.         common1: ['jquery'],
  7.         common2: ['vue']
  8.     },
  9.     output: {
  10.         path: __dirname + '/dist',
  11.         filename: '[name].js'//不使用[name]，并且插件中没有filename，
  12.         //这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了
  13.     },
  14.     plugins: [
  15.         new CommonsChunkPlugin({
  16.             name: ["chunk","common1","common2"],//页面上使用的时候common2
  17.             //必须最先加载
  18.             // filename:"chunk.js"//忽略则以name为输出文件的名字，
  19.                 //否则以此为输出文件名字
  20.             minChunks: 2
  21.         })
  22.     ]
  23. };



jquery被打包到common1.js,vue被打包到common2.js,chunk.js打包的是公共的业务模块(webpack用插件CommonsChunkPlugin进行打包的时候，将符合引用次数(minChunks)的模块打包到name参数的数组的第一个块里（chunk）,然后数组后面的块依次打包(查找entry里的key,没有找到相关的key就生成一个空的块)，最后一个块包含webpack生成的在浏览器上使用各个块的加载代码，所以页面上使用的时候最后一个块必须最先加载)

将webpack.config.js改为

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.     entry: {
  5.         main: './main.js',
  6.         main1: './main1.js',
  7.         jquery:["jquery"],
  8.         vue:["vue"]
  9.     },
  10.     output: {
  11.         path: __dirname + '/dist',
  12.         filename: '[name].js'
  13.     },
  14.     plugins: [
  15.         new CommonsChunkPlugin({
  16.             name: ["common","jquery","vue","load"],
  18.             minChunks:2
  20.         })
  21.     ]
  22. };

main.js

  1. require("./chunk1");
  2. require("./chunk2");
  3. var jq=require("jquery");
  4. console.log(jq);

main1.js

  1. require("./chunk1");
  2. require("./chunk2");
  3. var vue=require("vue");
  4. console.log(vue);
  5. exports.vue=vue;

打包后



common.js

  1. webpackJsonp([4,5],[
  2. /* 0 */,
  3. /* 1 */,
  4. /* 2 */
  5. /***/ function(module, exports, __webpack_require__) {
  7. 	__webpack_require__(3);
  8. 	var chunk1=1;
  9. 	exports.chunk1=chunk1;
  11. /***/ },
  12. /* 3 */
  13. /***/ function(module, exports) {
  15. 	var chunk2=1;
  16. 	exports.chunk2=chunk2;
  18. /***/ }
  19. ]);

相当于公共的业务代码都打包到了common.js里

load.js

  1. /******/ (function(modules) { // webpackBootstrap
  2. /******/ 	// install a JSONP callback for chunk loading
  3. /******/ 	var parentJsonpFunction = window["webpackJsonp"];
  4. /******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
  5. /******/ 		// add "moreModules" to the modules object,
  6. /******/ 		// then flag all "chunkIds" as loaded and fire callback
  7. /******/ 		var moduleId, chunkId, i = 0, callbacks = [];
  8. /******/ 		for(;i < chunkIds.length; i++) {
  9. /******/ 			chunkId = chunkIds[i];
  10. /******/ 			if(installedChunks[chunkId])
  11. /******/ 				callbacks.push.apply(callbacks, installedChunks[chunkId]);
  12. /******/ 			installedChunks[chunkId] = 0;
  13. /******/ 		}
  14. /******/ 		for(moduleId in moreModules) {
  15. /******/ 			modules[moduleId] = moreModules[moduleId];
  16. /******/ 		}
  17. /******/ 		if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
  18. /******/ 		while(callbacks.length)
  19. /******/ 			callbacks.shift().call(null, __webpack_require__);
  20. /******/ 		if(moreModules[0]) {
  21. /******/ 			installedModules[0] = 0;
  22. /******/ 			return __webpack_require__(0);
  23. /******/ 		}
  24. /******/ 	};
  26. /******/ 	// The module cache
  27. /******/ 	var installedModules = {};
  29. /******/ 	// object to store loaded and loading chunks
  30. /******/ 	// "0" means "already loaded"
  31. /******/ 	// Array means "loading", array contains callbacks
  32. /******/ 	var installedChunks = {
  33. /******/ 		5:0
  34. /******/ 	};
  36. /******/ 	// The require function
  37. /******/ 	function __webpack_require__(moduleId) {
  39. /******/ 		// Check if module is in cache
  40. /******/ 		if(installedModules[moduleId])
  41. /******/ 			return installedModules[moduleId].exports;
  43. /******/ 		// Create a new module (and put it into the cache)
  44. /******/ 		var module = installedModules[moduleId] = {
  45. /******/ 			exports: {},
  46. /******/ 			id: moduleId,
  47. /******/ 			loaded: false
  48. /******/ 		};
  50. /******/ 		// Execute the module function
  51. /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  53. /******/ 		// Flag the module as loaded
  54. /******/ 		module.loaded = true;
  56. /******/ 		// Return the exports of the module
  57. /******/ 		return module.exports;
  58. /******/ 	}
  60. /******/ 	// This file contains only the entry chunk.
  61. /******/ 	// The chunk loading function for additional chunks
  62. /******/ 	__webpack_require__.e = function requireEnsure(chunkId, callback) {
  63. /******/ 		// "0" is the signal for "already loaded"
  64. /******/ 		if(installedChunks[chunkId] === 0)
  65. /******/ 			return callback.call(null, __webpack_require__);
  67. /******/ 		// an array means "currently loading".
  68. /******/ 		if(installedChunks[chunkId] !== undefined) {
  69. /******/ 			installedChunks[chunkId].push(callback);
  70. /******/ 		} else {
  71. /******/ 			// start chunk loading
  72. /******/ 			installedChunks[chunkId] = [callback];
  73. /******/ 			var head = document.getElementsByTagName('head')[0];
  74. /******/ 			var script = document.createElement('script');
  75. /******/ 			script.type = 'text/javascript';
  76. /******/ 			script.charset = 'utf-8';
  77. /******/ 			script.async = true;
  79. /******/ 			script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"jquery","1":"main","2":"main1","3":"vue","4":"common"}[chunkId]||chunkId) + ".js";
  80. /******/ 			head.appendChild(script);
  81. /******/ 		}
  82. /******/ 	};
  84. /******/ 	// expose the modules object (__webpack_modules__)
  85. /******/ 	__webpack_require__.m = modules;
  87. /******/ 	// expose the module cache
  88. /******/ 	__webpack_require__.c = installedModules;
  90. /******/ 	// __webpack_public_path__
  91. /******/ 	__webpack_require__.p = "";
  92. /******/ })
  93. /************************************************************************/
  94. /******/ ([]);

使用的时候必须最先加载load.js

6.参数minChunks: Infinity

看一下下面的配置会是什么结果

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.     entry: {
  5.         main: './main.js',
  6.         main1: './main1.js',
  7.         jquery:["jquery"]
  8.     },
  9.     output: {
  10.         path: __dirname + '/dist',
  11.         filename: '[name].js'
  12.     },
  13.     plugins: [
  14.         new CommonsChunkPlugin({
  15.             name: "jquery",
  17.             minChunks:2
  19.         })
  20.     ]
  21. };



main.js,main1.js共同引用的chunk1和chunk2会被打包到jquery.js里

minChunks:2修改为minChunks:Infinity后，chunk1和chunk2都打包到main.js,main1.js里

7.参数chunks

webpack.config.js

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3.     entry: {
  5.         main: './main.js',
  6.         main1: './main1.js',
  7.         jquery:["jquery"]
  8.     },
  9.     output: {
  10.         path: __dirname + '/dist',
  11.         filename: '[name].js'
  12.     },
  13.     plugins: [
  14.         new CommonsChunkPlugin({
  15.             name: "jquery",
  17.             minChunks:2,
  19.             chunks:["main","main1"]
  21.         })
  22.     ]
  23. };

只有在main.js和main1.js中都引用的模块才会被打包的到公共模块（这里即jquery.js）

---恢复内容结束---

###1.demo结构：
![](//upload-images.jianshu.io/upload_images/2125695-12d6fb8aec5c1dfd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###2.package.json配置：
```
{
"name": "webpack-simple-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.1.0",
"vue": "^1.0.26"
},
"devDependencies": {
"css-loader": "^0.24.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.1"
}
}
```
###3.多种打包情况(未使用CommonsChunkPlugin)
####(1)单一入口，模块单一引用
webpack.config.js
```
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry:
{
main:'./main.js',
},
output: {
path:__dirname+'/dist',
filename: 'build.js'
},
plugins: [

]

};

  1. main.js

require("jquery");

  1. demo目录下运行命令行  webpack或npm run webpack
  2. ![](//upload-images.jianshu.io/upload_images/2125695-8aa6da95a1f4191a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  3. jquery模块被一起打包到build.js
  4. ####(2)单一入口，模块重复引用
  5. webpack.config.js不变，main.js：

require("./chunk1");

require("./chunk2");

  1. chunk1.js:

require("./chunk2");

var chunk1=1;

exports.chunk1=chunk1;

  1. chunk2.js:

var chunk2=1;

exports.chunk2=chunk2;

  1. main.js引用了chunk1、chunk2,chunk1又引用了chunk2，打包后：
  2. build.js:

...省略webpack生成代码

/***************************************************************/

// ([

/ 0 /

// function(module, exports, webpack_require) {

  1. __webpack_require__(1);
  2. __webpack_require__(2);

// },

/ 1 /

// function(module, exports, webpack_require) {

  1. __webpack_require__(2);
  2. var chunk1=1;
  3. exports.chunk1=chunk1;

// },

/ 2 /

// function(module, exports) {

  1. var chunk2=1;
  2. exports.chunk2=chunk2;

// }

/***/ ]);

  1. ####(3)多入口，模块单一引用，分文件输出
  2. webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

entry:

{

main:'./main.js',

main1:'./main1.js'

},

output: {

path:__dirname+'/dist',

filename: '[name].js'

},

plugins: [

]

};

  1. 打包后文件main.js,main1.js  内容与（2）build.js一致
  2. ####（4）多入口，模块单一引用，单一文件输出

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

entry:

{

main:'./main.js',

main1:'./main1.js'

},

output: {

path:__dirname+'/dist',

filename: 'buid.js'

},

plugins: [

]

};

  1. build.js与（2）一致
  2. ####（5）多入口，模块重复引用，单文件输出
  3. webpack.config.js与（4）一致
  4. main.js

require("./chunk1");

require("./chunk2");

exports.main=1;

  1. main1.js

require("./chunk1");

require("./chunk2");

require("./main");

  1. 报错：ERROR in ./main1.js
  2. Module not found: Error: a dependency to an entry point is not allowed
  3.  @ ./main1.js 3:0-17
  4. ###4.使用CommonsChunkPlugin
  5. (1)单一入口，模块单一引用，分文件输出:
  6. webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

entry:

{

main:'./main.js',

},

output: {

path:__dirname+'/dist',

filename: '[name].js'//不使用[name]，并且插件中没有filename，这输出文件中只用chunk.js的内容，

main.js的内容不知跑哪里去了

},

plugins: [

new CommonsChunkPlugin({

name:"chunk",

filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字

})

]

};

  1. main.js

require("./chunk1");

require("./chunk2");

require("jquery");

  1. ![](//upload-images.jianshu.io/upload_images/2125695-80c6450f282c71ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  2. 输出文件main.js chunk.js,chunk1.js,chunck2.js,jquery都被打包到main.js里，好像并没有什么卵用，但是页面上使用的时候chunk.js必须在mian.js前引用
  4. 将chunk1.js,chunck2.js打包到chunk.js:
  5. webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

entry:

{

main:'./main.js',

chunk: ["./chunk1", "./chunk2"],//插件中name,filename必须以这个key为值

},

output: {

path:__dirname+'/dist',

filename: '[name].js'//不使用[name]，并且插件中没有filename，

这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了

},

plugins: [

new CommonsChunkPlugin({

name:"chunk",

// filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字

})

]

};

  1. ![](//upload-images.jianshu.io/upload_images/2125695-ee4302704803a8a6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  2. ####(1)单一入口，模块重复引用，分文件输出(单一入口CommonsChunkPlugin能否将多次引用的模块打包到公共模块呢？)：
  3. webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

entry:

{

main:'./main.js',

//main1:'./main1.js',

},

output: {

path:__dirname+'/dist',

filename: '[name].js'//不使用[name]，并且插件中没有filename，

这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了

},

plugins: [

new CommonsChunkPlugin({

name:"chunk",

// filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字

minChunks:2

})

]

};

  1. main.js

require("./chunk1");

require("./chunk2");

  1. chunk1.js

require("./chunk2");

var chunk1=1;

exports.chunk1=chunk1;

  1. chunk2模块被引用了两次
  2. 打包后，所有模块还是被打包到main.js中
  3. ####(3)多入口，模块重复引用，分文件输出（将多次引用的模块打包到公共模块）
  4. webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

entry:

{

main:'./main.js',

main1:'./main1.js',

},

output: {

path:__dirname+'/dist',

filename: '[name].js'//不使用[name]，并且插件中没有filename，

这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了

},

plugins: [

new CommonsChunkPlugin({

name:"chunk",

// filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字

minChunks:2

})

]

};

  1. main.js,main1.js里都引用chunk1,chunk2.
  2. 打包后：
  3. chunk1,chunk2被打包到chunk.js,不再像3(3)chunk1,chunk2分别被打包到mian,mian1中。
  4. ###5.将公共业务模块与类库或框架分开打包
  5. webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

entry: {

main: './main.js',

main1: './main1.js',

common1: ['jquery'],

common2: ['vue']

},

output: {

path: __dirname + '/dist',

filename: '[name].js'//不使用[name]，并且插件中没有filename，

//这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了

},

plugins: [

new CommonsChunkPlugin({

name: ["chunk","common1","common2"],//页面上使用的时候common2

//必须最先加载

// filename:"chunk.js"//忽略则以name为输出文件的名字，

//否则以此为输出文件名字

minChunks: 2

})

]

};

  1. ![](//upload-images.jianshu.io/upload_images/2125695-c393f6cb60aed289.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  2. jquery被打包到common1.js,vue被打包到common2.js,chunk.js打包的是公共的业务模块(webpack用插件CommonsChunkPlugin进行打包的时候，将符合引用次数(minChunks)的模块打包到name参数的数组的第一个块里（chunk）,然后数组后面的块依次打包(查找entry里的key,没有找到相关的key就生成一个空的块)，最后一个块包含webpack生成的在浏览器上使用各个块的加载代码，所以页面上使用的时候最后一个块必须最先加载)
  3. 将webpack.config.js改为

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

entry: {

  1.     main: './main.js',
  2.     main1: './main1.js',
  3.     jquery:["jquery"],
  4.     vue:["vue"]
  5. },
  6. output: {
  7.     path: __dirname + '/dist',
  8.     filename: '[name].js'
  9. },
  10. plugins: [
  11.     new CommonsChunkPlugin({
  12.         name: ["common","jquery","vue","load"],
  14.         minChunks:2
  16.     })
  17. ]

};

  1. main.js

require("./chunk1");

require("./chunk2");

var jq=require("jquery");

console.log(jq);

  1. main1.js

require("./chunk1");

require("./chunk2");

var vue=require("vue");

console.log(vue);

exports.vue=vue;

  1. 打包后
  2. ![](//upload-images.jianshu.io/upload_images/2125695-d053503532733508.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  3. common.js

webpackJsonp([4,5],[

/* 0 /,

/ 1 /,

/ 2 /

/**/ function(module, exports, webpack_require) {

  1. __webpack_require__(3);
  2. var chunk1=1;
  3. exports.chunk1=chunk1;

// },

/ 3 /

// function(module, exports) {

  1. var chunk2=1;
  2. exports.chunk2=chunk2;

/***/ }

]);

  1. 相当于公共的业务代码都打包到了common.js里
  2. load.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 = {

// 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 = "";

// })

/************************************************************/

// ([]);

  1. 使用的时候必须最先加载load.js
  2. ###6.参数minChunks: Infinity
  3. 看一下下面的配置会是什么结果

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

entry: {

  1.     main: './main.js',
  2.     main1: './main1.js',
  3.     jquery:["jquery"]
  4. },
  5. output: {
  6.     path: __dirname + '/dist',
  7.     filename: '[name].js'
  8. },
  9. plugins: [
  10.     new CommonsChunkPlugin({
  11.         name: "jquery",
  13.         minChunks:2
  15.     })
  16. ]

};

  1. ![](//upload-images.jianshu.io/upload_images/2125695-ab6cac77d9eaa278.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  2. main.js,main1.js共同引用的chunk1和chunk2会被打包到jquery.js里
  4. minChunks:2修改为minChunks:Infinity后，chunk1和chunk2都打包到main.js,main1.js里
  5. ###7.参数chunks
  6. webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

entry: {

  1.     main: './main.js',
  2.     main1: './main1.js',
  3.     jquery:["jquery"]
  4. },
  5. output: {
  6.     path: __dirname + '/dist',
  7.     filename: '[name].js'
  8. },
  9. plugins: [
  10.     new CommonsChunkPlugin({
  11.         name: "jquery",
  13.         minChunks:2,
  15.         chunks:["main","main1"]
  17.     })
  18. ]

};

  1. 只有在main.js和main1.js中都引用的模块才会被打包的到公共模块（这里即jquery.js）

webpack CommonsChunkPlugin详细教程的更多相关文章

  1. WebPack 简明学习教程

    WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...

  2. npm安装vue详细教程（图片详解）

    npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...

  3. webpack 的使用教程

    webpack 的使用教程 今天接触webpack,就着官网上的教程一步一步的玩,把自己的理解总结以便和大家交流 webpack的主要特点 1. 可以把js,css,image,甚至文本当成模块来处理 ...

  4. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  5. Git使用详细教程（一）

    很久不发博客,最近有兴趣想写点东西,但 Live Writer 不支持从Word复制图片,疯狂吐槽下 Git使用详细教程(一) Git使用详细教程(二) 该教程主要是Git与IntelliJ IDEA ...

  6. Win7 U盘安装Ubuntu16.04 双系统详细教程

    Win7 U盘安装Ubuntu16.04 双系统详细教程 安装主要分为以下几步: 一． 下载Ubuntu 16.04镜像软件: 二． 制作U盘启动盘使用ultraISO: 三． 安装Ubuntu系统: ...

  7. Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境（详细教程）

    Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程) 声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级 ...

  8. Ubuntu 16.04安装QQ国际版图文详细教程

            因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...

  9. Ubuntu-安装-theano+caffe-超详细教程

    一.说明 本文是继<Ubuntu-安装-cuda7.0-单显卡-超详细教程> 之后的续篇.theano和caffe是深度学习库,对运算能力需求很大,最好使用cuda进行加速.所以,请先阅读 ...

随机推荐

  1. 有关binlog的那点事（mysql5.7.13）

    binlog作为mysql中最重要的日志之一,能实现异常恢复以及主从复制. 我们主要讨论的是主从复制中的binlog,这里将以mysql5.7.13的源码为主要依据来分析binlog. 在主从复制中, ...

  2. 使用JAVA编写电话薄程序，具备添加，查找，删除等功能

    //该程序需要连接数据库.根据word文档要求所有功能均已实现.//大部分方法基本差不多,//在查询修改的时候能输出 最大ID号 和最小ID号,并且可以对输入的ID号进行判断是否存在(具体方法请查看 ...

  3. ajax局部刷新后，如何让局部中的百度分享重新加载

    我这个人不怎么喜欢说太多话,看几个图你们就懂了 Ajax前 Ajax之后 原因分析 解决方法 收工 百度分享是集成了众多主流第三方网站分享和收藏按钮的工具. 通过百度分享轻松将主流第三方网站的分享按钮 ...

  4. SQL Server中的高可用性（3）----复制

        在本系列文章的前两篇对高可用性的意义和单实例下的高可用性做了阐述.但是当随着数据量的增长,以及对RTO和RPO要求的严格,单实例已经无法满足HA/DR方面的要求,因此需要做多实例的高可用性.本 ...

  5. UGUI 之获取当前控件的高度

    当Canvas Scaler选择Constant Pixel Size 当前的分辨率会被被固定,可以用RectTransform类里面的.rect变量值获取 height或Width. 在次情况下获取 ...

  6. WPF textblock加入超链接

    <TextBlock Grid.Row=" Margin="75,0,0,0"> <Hyperlink Name="BlogHl" ...

  7. .NET平台开源项目速览(4).NET文档生成工具ADB及使用

    很久以前就使用ADB这个工具来生成项目的帮助文档.功能强大,在学习一些开源项目的过程中,官方没有提供CHM帮助文档,所以为了快速的了解项目结构和注释.就生成文档来自己看,非常好用.这也是一个学习方法吧 ...

  8. 【开源】OSharp框架解说系列（5.2）：EntityFramework数据层实现

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  9. Web前端框架与类库的思考

    说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...

  10. linux安装和配置 mysql、redis 过程中遇到的问题记录

    linux下部署mysql和redis网上的教程很多,这里记录一下我部署.配置的过程中遇到的一些问题和解决办法. mysql ①安装完成后启动的时候报错 Starting MySQL.The serv ...