本文介绍了webpack中CommonsChunkPlugin详细教程(小结)，分享给大家，也给自己留个笔记，具体如下：
1.demo结构：
2.package.json配置：
3.多种打包情况(未使用CommonsChunkPlugin)
(1)单一入口，模块单一引用
webpack.config.js
};
main.js
demo目录下运行命令行 webpack或npm run webpack
jquery模块被一起打包到build.js
(2)单一入口，模块重复引用
webpack.config.js不变，main.js：
chunk1.js:
chunk2.js:
main.js引用了chunk1、chunk2,chunk1又引用了chunk2，打包后：
build.js:
webpack_require(1);
webpack_require(2);
// },/ 1 /
// function(module,__webpack_require__) {
__webpack_require__(2);
var chunk1=1;
exports.chunk1=chunk1;
// },/ 2 /
// function(module,exports) {
var chunk2=1;
exports.chunk2=chunk2;
/*/ }
/****/ ]);
webpack.config.js
};
打包后文件main.js,main1.js 内容与（2）build.js一致
};
build.js与（2）一致
webpack.config.js与（4）一致
main.js
main1.js
报错：ERROR in ./main1.js
Module not found: Error: a dependency to an entry point is not allowed
@ ./main1.js 3:0-17
4.使用CommonsChunkPlugin
webpack.config.js
main.js
输出文件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)单一入口，模块重复引用，分文件输出(单一入口CommonsChunkPlugin能否将多次引用的模块打包到公共模块呢？)：
webpack.config.js
main.js
chunk1.js
chunk2模块被引用了两次
打包后，所有模块还是被打包到main.js中
(3)多入口，模块重复引用，分文件输出（将多次引用的模块打包到公共模块）
webpack.config.js
main.js,main1.js里都引用chunk1,chunk2.
打包后：
chunk1,chunk2被打包到chunk.js,不再像3(3)chunk1,chunk2分别被打包到mian,mian1中。
5.将公共业务模块与类库或框架分开打包
webpack.config.js
jquery被打包到common1.js,vue被打包到common2.js,chunk.js打包的是公共的业务模块(webpack用插件CommonsChunkPlugin进行打包的时候，将符合引用次数(minChunks)的模块打包到name参数的数组的第一个块里（chunk）,然后数组后面的块依次打包(查找entry里的key,没有找到相关的key就生成一个空的块)，最后一个块包含webpack生成的在浏览器上使用各个块的加载代码，所以页面上使用的时候最后一个块必须最先加载)
将webpack.config.js改为
main: './main.js',jquery:["jquery"],vue:["vue"]
},filename: '[name].js'
},plugins: [
new CommonsChunkPlugin({
name: ["common","jquery","vue","load"],minChunks:2
})]
};
main.js
main1.js
打包后
common.js
var chunk1=1;
exports.chunk1=chunk1;
// },/ 3 /
// function(module,exports) {
var chunk2=1;
exports.chunk2=chunk2;
/***/ }
]);
相当于公共的业务代码都打包到了common.js里
load.js
/**/ 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
看一下下面的配置会是什么结果
main: './main.js',jquery:["jquery"]
},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
main: './main.js',minChunks:2,chunks:["main","main1"]
})
]
};
只有在main.js和main1.js中都引用的模块才会被打包的到公共模块（这里即jquery.js）
原文链接：https://www.f2er.com/js/35290.html