本文介绍了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）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json？Protocol Buffer？FlatBuffers？
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论