webpack CommonsChunkPlugin详细教程
1.demo结构：
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: [
]
};
main.js
require("jquery");
demo目录下运行命令行 webpack或npm run webpack
jquery模块被一起打包到build.js
(2)单一入口，模块重复引用
webpack.config.js不变，main.js：
require("./chunk1");
require("./chunk2");
chunk1.js:
require("./chunk2");
var chunk1=1;
exports.chunk1=chunk1;
chunk2.js:
var chunk2=1;
exports.chunk2=chunk2;
main.js引用了chunk1、chunk2,chunk1又引用了chunk2，打包后：
build.js:
...省略webpack生成代码
/************************************************************************/
/******/ ([
/* 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;
/***/ }
/******/ ]);
(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'
},
plugins: [
]
};
打包后文件main.js,main1.js 内容与（2）build.js一致
（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: [
]
};
build.js与（2）一致
（5）多入口，模块重复引用，单文件输出
webpack.config.js与（4）一致
main.js
require("./chunk1");
require("./chunk2");
exports.main=1;
main1.js
require("./chunk1");
require("./chunk2");
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
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为输出文件的名字，否则以此为输出文件名字
})
]
};
main.js
require("./chunk1");
require("./chunk2");
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
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)单一入口，模块重复引用，分文件输出(单一入口CommonsChunkPlugin能否将多次引用的模块打包到公共模块呢？)：
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
})
]
};
main.js
require("./chunk1");
require("./chunk2");
chunk1.js
require("./chunk2");
var chunk1=1;
exports.chunk1=chunk1;
chunk2模块被引用了两次
打包后，所有模块还是被打包到main.js中
(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
})
]
};
main.js,main1.js里都引用chunk1,chunk2.
打包后：
chunk1,chunk2被打包到chunk.js,不再像3(3)chunk1,chunk2分别被打包到mian,mian1中。
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
})
]
};
jquery被打包到common1.js,vue被打包到common2.js,chunk.js打包的是公共的业务模块(webpack用插件CommonsChunkPlugin进行打包的时候，将符合引用次数(minChunks)的模块打包到name参数的数组的第一个块里（chunk）,然后数组后面的块依次打包(查找entry里的key,没有找到相关的key就生成一个空的块)，最后一个块包含webpack生成的在浏览器上使用各个块的加载代码，所以页面上使用的时候最后一个块必须最先加载)
将webpack.config.js改为
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
main: './main.js',
main1: './main1.js',
jquery:["jquery"],
vue:["vue"]
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
plugins: [
new CommonsChunkPlugin({
name: ["common","jquery","vue","load"],
minChunks:2
})
]
};
main.js
require("./chunk1");
require("./chunk2");
var jq=require("jquery");
console.log(jq);
main1.js
require("./chunk1");
require("./chunk2");
var vue=require("vue");
console.log(vue);
exports.vue=vue;
打包后
common.js
webpackJsonp([4,5],[
/* 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;
/***/ }
]);
相当于公共的业务代码都打包到了common.js里
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 = "";
/******/ })
/************************************************************************/
/******/ ([]);
使用的时候必须最先加载load.js
6.参数minChunks: Infinity
看一下下面的配置会是什么结果
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
main: './main.js',
main1: './main1.js',
jquery:["jquery"]
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
plugins: [
new CommonsChunkPlugin({
name: "jquery",
minChunks:2
})
]
};
main.js,main1.js共同引用的chunk1和chunk2会被打包到jquery.js里
minChunks:2修改为minChunks:Infinity后，chunk1和chunk2都打包到main.js,main1.js里
7.参数chunks
webpack.config.js
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
main: './main.js',
main1: './main1.js',
jquery:["jquery"]
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
plugins: [
new CommonsChunkPlugin({
name: "jquery",
minChunks:2,
chunks:["main","main1"]
})
]
};
只有在main.js和main1.js中都引用的模块才会被打包的到公共模块（这里即jquery.js）
---恢复内容结束---
###1.demo结构：
###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: [
]
};
main.js
require("jquery");
demo目录下运行命令行 webpack或npm run webpack
jquery模块被一起打包到build.js
####(2)单一入口，模块重复引用
webpack.config.js不变，main.js：
require("./chunk1");
require("./chunk2");
chunk1.js:
require("./chunk2");
var chunk1=1;
exports.chunk1=chunk1;
chunk2.js:
var chunk2=1;
exports.chunk2=chunk2;
main.js引用了chunk1、chunk2,chunk1又引用了chunk2，打包后：
build.js:
...省略webpack生成代码
/***************************************************************/
// ([
/ 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;
// }
/***/ ]);
####(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'
},
plugins: [
]
};
打包后文件main.js,main1.js 内容与（2）build.js一致
####（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: [
]
};
build.js与（2）一致
####（5）多入口，模块重复引用，单文件输出
webpack.config.js与（4）一致
main.js
require("./chunk1");
require("./chunk2");
exports.main=1;
main1.js
require("./chunk1");
require("./chunk2");
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
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为输出文件的名字，否则以此为输出文件名字
})
]
};
main.js
require("./chunk1");
require("./chunk2");
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
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)单一入口，模块重复引用，分文件输出(单一入口CommonsChunkPlugin能否将多次引用的模块打包到公共模块呢？)：
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
})
]
};
main.js
require("./chunk1");
require("./chunk2");
chunk1.js
require("./chunk2");
var chunk1=1;
exports.chunk1=chunk1;
chunk2模块被引用了两次
打包后，所有模块还是被打包到main.js中
####(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
})
]
};
main.js,main1.js里都引用chunk1,chunk2.
打包后：
chunk1,chunk2被打包到chunk.js,不再像3(3)chunk1,chunk2分别被打包到mian,mian1中。
###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
})
]
};
jquery被打包到common1.js,vue被打包到common2.js,chunk.js打包的是公共的业务模块(webpack用插件CommonsChunkPlugin进行打包的时候，将符合引用次数(minChunks)的模块打包到name参数的数组的第一个块里（chunk）,然后数组后面的块依次打包(查找entry里的key,没有找到相关的key就生成一个空的块)，最后一个块包含webpack生成的在浏览器上使用各个块的加载代码，所以页面上使用的时候最后一个块必须最先加载)
将webpack.config.js改为
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
main: './main.js',
main1: './main1.js',
jquery:["jquery"],
vue:["vue"]
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
plugins: [
new CommonsChunkPlugin({
name: ["common","jquery","vue","load"],
minChunks:2
})
]
};
main.js
require("./chunk1");
require("./chunk2");
var jq=require("jquery");
console.log(jq);
main1.js
require("./chunk1");
require("./chunk2");
var vue=require("vue");
console.log(vue);
exports.vue=vue;
打包后
common.js
webpackJsonp([4,5],[
/* 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;
/***/ }
]);
相当于公共的业务代码都打包到了common.js里
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 = "";
// })
/************************************************************/
// ([]);
使用的时候必须最先加载load.js
###6.参数minChunks: Infinity
看一下下面的配置会是什么结果
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
main: './main.js',
main1: './main1.js',
jquery:["jquery"]
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
plugins: [
new CommonsChunkPlugin({
name: "jquery",
minChunks:2
})
]
};
main.js,main1.js共同引用的chunk1和chunk2会被打包到jquery.js里
minChunks:2修改为minChunks:Infinity后，chunk1和chunk2都打包到main.js,main1.js里
###7.参数chunks
webpack.config.js
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
main: './main.js',
main1: './main1.js',
jquery:["jquery"]
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
plugins: [
new CommonsChunkPlugin({
name: "jquery",
minChunks:2,
chunks:["main","main1"]
})
]
};
只有在main.js和main1.js中都引用的模块才会被打包的到公共模块（这里即jquery.js）webpack CommonsChunkPlugin详细教程的更多相关文章
- WebPack 简明学习教程
WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...
- npm安装vue详细教程（图片详解）
npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...
- webpack 的使用教程
webpack 的使用教程 今天接触webpack,就着官网上的教程一步一步的玩,把自己的理解总结以便和大家交流 webpack的主要特点 1. 可以把js,css,image,甚至文本当成模块来处理 ...
- SASS教程sass超详细教程
SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...
- Git使用详细教程（一）
很久不发博客,最近有兴趣想写点东西,但 Live Writer 不支持从Word复制图片,疯狂吐槽下 Git使用详细教程(一) Git使用详细教程(二) 该教程主要是Git与IntelliJ IDEA ...
- Win7 U盘安装Ubuntu16.04 双系统详细教程
Win7 U盘安装Ubuntu16.04 双系统详细教程 安装主要分为以下几步: 一． 下载Ubuntu 16.04镜像软件: 二． 制作U盘启动盘使用ultraISO: 三． 安装Ubuntu系统: ...
- Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境（详细教程）
Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程) 声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级 ...
- Ubuntu 16.04安装QQ国际版图文详细教程
因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...
- Ubuntu-安装-theano+caffe-超详细教程
一.说明 本文是继<Ubuntu-安装-cuda7.0-单显卡-超详细教程> 之后的续篇.theano和caffe是深度学习库,对运算能力需求很大,最好使用cuda进行加速.所以,请先阅读 ...
随机推荐
- MongoDB 使用Index
Index 能够提高查询的性能,如果没有Index,MongoDB必须扫描整个collection,从collection的第一个doc开始,直到最后一个doc,即使第一个doc之后的所有doc都不满 ...
- Spill data to tempdb
查看Execution Plan时,在Sort Operator上,发现一个Warning:Operator used tempdb to spill data during execution wi ...
- Sql Server系列：数据库组成及系统数据库
1. 数据库组成 数据库的存储结构分为逻辑存储结构和物理存储结构. ◊ 逻辑存储结构:说明数据库是由哪些性质的信息所组成.SQL Server的数据库不仅仅只是数据的存储,所有与数据处理操作相关的信息 ...
- 针对格式文件，Python读取一定大小的文件内容
由数据库导出的数据是格式化数据,如下所示,每两个<REC>之间的数据是一个记录的所有字段数据,如<TITLE>.<ABSTRACT>.<SUBJECT_COD ...
- MVC4做网站后台:用户管理 ——用户组 1、添加用户组
打开控制器UserGroupController 添加Add action /// <summary> /// 添加用户组 /// </summary> /// <ret ...
- 为 Neutron 准备物理基础设施（I） - 每天5分钟玩转 OpenStack（75）
前面讨论了 Neutron 的架构和基础知识,接下来就要通过实验深入学习和实践了. 第一步就是准备实验用的物理环境,考虑如下几个问题: 需要几个节点? 如何分配节点的角色? 节点上部署哪些服务? 配几 ...
- 【读书笔记】XHTML与HTML5 的差异
最近在困惑html5和XHTML两者之间的具体区别,查看了百度.google和新浪等,他们首页的源码第一句都是 1 <!Doctype html> 这是HTML5的doctype声明,说明 ...
- CDH安装失败了，如何重新安装
1> 删除Agent节点的UUID # rm -rf /opt/cm-5.4.7/lib/cloudera-scm-agent/* 2> 清空主节点CM数据库 进入主节点的Mysql数据 ...
- 网络通信简单实例BIO,NIO,AIO
这里,我将做一个简单的通信程序,分别使用三种原始的通信工具:BIO,NIO,AIO. 功能就是一个服务器,一个客户端.服务器就是处理请求,返回响应.而客户端就是连接服务器,发送请求,接收响应. 第一步 ...
- Linux分区：超过2TB硬盘分区
测试iscsi服务是否正常 [root@FocusBackup ~]# service iscsi restart 停止 iscsi: ...