[转] Webpack-CommonsChunkPlugin
当前项目结构
![](http://upload-images.jianshu.io/upload_images/1643592-62bb4dc3f8f1539e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/224)
其中
- Greeter.js 引用了 config.json
- main.js 和 second.js 都引用了 Greeter.js
- main.js 还引用了 onlyformain.js
- second.js 还引用了 onlyforsecond.js
代码如下
// config.json
{
"greetText": "Hi there and greetings from JSON!"
}
// Greeter.js
var config = require('./config.json');
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = config.greetText;
greet.innerText = config.greetText;
console.log(config.greetText)
return greet;
};
// main.js
import 'babel-polyfill'
import './OnlyForMain'
var greeter = require("./Greeter.js")
document.getElementById('root').appendChild(greeter());
console.log("this is from main.js")
// second.js
import 'babel-polyfill'
import './OnlyForSecond'
var greeter = require("./Greeter.js")
document.getElementById('root').appendChild(greeter());
console.log("this is from second.js")
// onlyformain.js
var config = require('./config.json');
module.exports = function() {
console.log("this is only for main")
return {};
};
// onlyforsecond.js
var config = require('./config.json');
module.exports = function() {
console.log("this is only for second")
return {};
};
webpack 配置
![](http://upload-images.jianshu.io/upload_images/1643592-dabf91284a60d5a0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
当配置 commonChunkPlugin 参数,结果如下:
Case 1
![](http://upload-images.jianshu.io/upload_images/1643592-b5c5266bfbeb9745.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/640)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-40effd9862ccbae3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/494)
打包后
![](http://upload-images.jianshu.io/upload_images/1643592-c0b9f93323a8308b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/188)
没有后缀
Case2
![](http://upload-images.jianshu.io/upload_images/1643592-8c53a49753b41fb2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/692)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-45b7612d6fccb0b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/439)
提出了公共js - init.js
Case3
![](http://upload-images.jianshu.io/upload_images/1643592-cdfe6716fc8a6395.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/600)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-9f9e8120cddd3e39.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/468)
Case4
![](http://upload-images.jianshu.io/upload_images/1643592-0632f6f57e08a669.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/553)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-22e2f81adef8fcbe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/441)
**assert 名称 和 chunk 名称 不一样了 **
Case5
![](http://upload-images.jianshu.io/upload_images/1643592-f4a9d83a2ffc0560.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/581)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-2d3803ccf78c5b84.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/696)
Case6
![](http://upload-images.jianshu.io/upload_images/1643592-2cea0a9425251925.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/575)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-fbe30f2959d7e048.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/449)
此时common.js中仅仅有module-require函数
Case7
![](http://upload-images.jianshu.io/upload_images/1643592-f93ef8468f8dddd5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/562)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-0a0c048c58dfda1b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/441)
此时common.js提取出了config.json和Greeter.js
Case8
![](http://upload-images.jianshu.io/upload_images/1643592-3d642cee826b5cf6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/554)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-f81b073937b6828b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/467)
common.js提取出了所有的js,此时 main.js 和 second.js中的代码仅有一行
webpackJsonp([0,1],[]);
Case9
![](http://upload-images.jianshu.io/upload_images/1643592-adc2d0cbf55e39ba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/563)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-4e1fbae4cf80a186.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/448)
**仅仅提出了 module-require 公共部分 ,其他公共模块并不抽取 **
Case 10
![](http://upload-images.jianshu.io/upload_images/1643592-28daff45744c0c46.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/638)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-08e96abfdbc247cb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/461)
Case11
![](http://upload-images.jianshu.io/upload_images/1643592-1cb4f8d8c4593f9e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/593)
命令行
![](http://upload-images.jianshu.io/upload_images/1643592-787ffc32fdf785d3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/446)
总结
CommonsChunkPlugin
options.name或options.names(string | string []):公共块的块名称。 可以通过传递现有块的名称来选择现有块。 如果传递一个字符串数组,这等于为每个块名称多次调用插件。 如果省略并且options.async或options.children设置为所有块,则使用options.filename作为块名。
options.filename(string):公共块的文件名模板。 可以包含与output.filename相同的占位符。 如果省略,原始文件名不会被修改(通常为output.filename或output.chunkFilename)。
options.minChunks(number | Infinity | function(module,count) - > boolean):在移动到公共块之前需要包含一个模块的块的最小数量。 该数字必须大于或等于2且小于或等于块的数量。 传递无限只是创建公共块,但不移动模块。 通过提供一个函数,你可以添加自定义逻辑。 (默认为块的数量)
options.chunks(string []):按块名称选择源块。 块必须是公共块的子节点。 如果省略,则选择所有条目块。
options.children(boolean):如果true,则选择公共块的所有子节点
options.async(boolean | string):如果为true,将创建一个新的异步公共块作为options.name的子节点和options.chunks的子节点。 它与options.chunks并行加载。 可以通过提供所需的字符串而不是true来更改输出文件的名称。
options.minSize(number):创建公共块之前所有公共模块的最小大小。