webpack中CommonsChunkPlugin详细教程(小结)

本文介绍了webpack中CommonsChunkPlugin详细教程(小结)，分享给大家，也给自己留个笔记，具体如下：@H_301_1@

1.demo结构：

@H_301_1@

@H_301_1@@H_301_1@

2.package.json配置：

@H_301_1@

css-loader": "^0.24.0","style-loader": "^0.13.1","webpack": "^1.13.2","webpack-dev-server": "^1.15.1" } }

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

@H_301_1@

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

webpack.config.js@H_301_1@

]
};

main.js@H_301_1@

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

@H_301_1@@H_301_1@

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

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

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

chunk1.js:@H_301_1@

chunk2.js:@H_301_1@

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

build.js:@H_301_1@

生成代码 /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module,exports,__webpack_require__) {

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;

/*/ }
/****/ ]);

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

webpack.config.js@H_301_1@

]
};

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

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

]
};

build.js与（2）一致@H_301_1@

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

webpack.config.js与（4）一致 @H_301_1@

main.js@H_301_1@

main1.js@H_301_1@

报错：ERROR in ./main1.js @H_301_1@

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

@ ./main1.js 3:0-17@H_301_1@

4.使用CommonsChunkPlugin

@H_301_1@

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

webpack.config.js@H_301_1@

插件中没有filename，这输出文件中只用chunk.js的内容， main.js的内容不知跑哪里去了 },plugins: [ new CommonsChunkPlugin({ name:"chunk",filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字 }) ] };

main.js@H_301_1@

@H_301_1@@H_301_1@

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

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

webpack.config.js@H_301_1@

插件中name,filename必须以这个key为值 },filename: '[name].js'//不使用[name]，并且插件中没有filename，这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了 },// filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字 }) ] };

@H_301_1@@H_301_1@

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

webpack.config.js@H_301_1@

插件中没有filename，这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了 },// filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字 minChunks:2 }) ] };

main.js@H_301_1@

chunk1.js@H_301_1@

chunk2模块被引用了两次 @H_301_1@

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

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

webpack.config.js@H_301_1@

输出文件的名字，否则以此为输出文件名字 minChunks:2 }) ] };

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

打包后： @H_301_1@

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

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

@H_301_1@

webpack.config.js@H_301_1@

插件中没有filename， //这输出文件中只用chunk.js的内容，main.js的内容不知跑哪里去了 },plugins: [ new CommonsChunkPlugin({ name: ["chunk","common1","common2"],//页面上使用的时候common2 //必须最先加载 // filename:"chunk.js"//忽略则以name为输出文件的名字， //否则以此为输出文件名字 minChunks: 2 }) ] };

@H_301_1@@H_301_1@

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

将webpack.config.js改为@H_301_1@

main: './main.js',jquery:["jquery"],vue:["vue"]

},filename: '[name].js'
},plugins: [
new CommonsChunkPlugin({
name: ["common","jquery","vue","load"],minChunks:2

})

]
};

main.js@H_301_1@

main1.js@H_301_1@

打包后@H_301_1@

@H_301_1@@H_301_1@

common.js@H_301_1@

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

// },/ 3 /
// function(module,exports) {

var chunk2=1;
exports.chunk2=chunk2;

/***/ }
]);

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

load.js@H_301_1@

/**/ // 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@H_301_1@

6.参数minChunks: Infinity

@H_301_1@

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

main: './main.js',jquery:["jquery"]

},plugins: [
new CommonsChunkPlugin({
name: "jquery",minChunks:2

})

]
};

@H_301_1@@H_301_1@

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

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

7.参数chunks

@H_301_1@

webpack.config.js@H_301_1@

main: './main.js',minChunks:2,chunks:["main","main1"]

})

]
};

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 @H_301_1@ 原文链接：https://www.f2er.com/js/35290.html

webpack中CommonsChunkPlugin详细教程(小结)

1.demo结构：

2.package.json配置：

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

4.使用CommonsChunkPlugin

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

6.参数minChunks: Infinity

7.参数chunks

猜你在找的JavaScript相关文章