當(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
命令行
打包后
沒有后綴
Case2
命令行
提出了公共js - init.js
Case3
命令行
Case4
命令行
**assert 名稱 和 chunk 名稱 不一樣了 **
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 []）：公共塊的塊名稱树灶。 可以通過傳遞現(xiàn)有塊的名稱來選擇現(xiàn)有塊督笆。 如果傳遞一個(gè)字符串?dāng)?shù)組闽坡，這等于為每個(gè)塊名稱多次調(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ù)量变秦。 傳遞無限只是創(chuàng)建公共塊成榜，但不移動(dòng)模塊。 通過提供一個(gè)函數(shù)蹦玫，你可以添加自定義邏輯赎婚。 （默認(rèn)為塊的數(shù)量）
options.chunks（string []）：按塊名稱選擇源塊。 塊必須是公共塊的子節(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并行加載挖帘。 可以通過提供所需的字符串而不是true來更改輸出文件的名稱完丽。
options.minSize（number）：創(chuàng)建公共塊之前所有公共模塊的最小大小。
