當(dāng)前項(xiàng)目結(jié)構(gòu)
其中
- 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 配置
當(dāng)配置 commonChunkPlugin 參數(shù)，結(jié)果如下：
Case 1
命令行
打包后
沒(méi)有后綴
Case2
命令行
提出了公共js - init.js
Case3
命令行
Case4
命令行
**assert 名稱(chēng) 和 chunk 名稱(chēng) 不一樣了 **
Case5
命令行
Case6
命令行
此時(shí)common.js中僅僅有module-require函數(shù)
Case7
命令行
此時(shí)common.js提取出了config.json和Greeter.js
Case8
命令行
common.js提取出了所有的js，此時(shí) main.js 和 second.js中的代碼僅有一行
webpackJsonp([0,1],[]);
Case9
命令行
**僅僅提出了 module-require 公共部分 ，其他公共模塊并不抽取 **
Case 10
命令行
Case11
命令行
總結(jié)
CommonsChunkPlugin
options.name或options.names（string | string []）：公共塊的塊名稱(chēng)。 可以通過(guò)傳遞現(xiàn)有塊的名稱(chēng)來(lái)選擇現(xiàn)有塊。 如果傳遞一個(gè)字符串?dāng)?shù)組，這等于為每個(gè)塊名稱(chēng)多次調(diào)用插件。 如果省略并且options.async或options.children設(shè)置為所有塊，則使用options.filename作為塊名。
options.filename（string）：公共塊的文件名模板。 可以包含與output.filename相同的占位符。 如果省略，原始文件名不會(huì)被修改（通常為output.filename或output.chunkFilename）。
options.minChunks（number | Infinity | function（module，count） - > boolean）：在移動(dòng)到公共塊之前需要包含一個(gè)模塊的塊的最小數(shù)量。 該數(shù)字必須大于或等于2且小于或等于塊的數(shù)量。 傳遞無(wú)限只是創(chuàng)建公共塊，但不移動(dòng)模塊。 通過(guò)提供一個(gè)函數(shù)，你可以添加自定義邏輯。 （默認(rèn)為塊的數(shù)量）
options.chunks（string []）：按塊名稱(chēng)選擇源塊。 塊必須是公共塊的子節(jié)點(diǎn)。 如果省略，則選擇所有條目塊。
options.children（boolean）：如果true，則選擇公共塊的所有子節(jié)點(diǎn)
options.async（boolean | string）：如果為true，將創(chuàng)建一個(gè)新的異步公共塊作為options.name的子節(jié)點(diǎn)和options.chunks的子節(jié)點(diǎn)。 它與options.chunks并行加載。 可以通過(guò)提供所需的字符串而不是true來(lái)更改輸出文件的名稱(chēng)。
options.minSize（number）：創(chuàng)建公共塊之前所有公共模塊的最小大小。
