当前项目结构
其中
- 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 配置
当配置 commonChunkPlugin 参数，结果如下：
Case 1
命令行
打包后
没有后缀
Case2
命令行
提出了公共js - init.js
Case3
命令行
Case4
命令行
**assert 名称 和 chunk 名称 不一样了 **
Case5
命令行
Case6
命令行
此时common.js中仅仅有module-require函数
Case7
命令行
此时common.js提取出了config.json和Greeter.js
Case8
命令行
common.js提取出了所有的js，此时 main.js 和 second.js中的代码仅有一行
webpackJsonp([0,1],[]);
Case9
命令行
**仅仅提出了 module-require 公共部分 ，其他公共模块并不抽取 **
Case 10
命令行
Case11
命令行
总结
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）：创建公共块之前所有公共模块的最小大小。