[转] Webpack-CommonsChunkPlugin

当前项目结构

 

项目结构

其中

• 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 配置

 

Paste_Image.png

当配置 commonChunkPlugin 参数，结果如下：

Case 1

 

Paste_Image.png

命令行

 

Paste_Image.png

打包后

 

 

没有后缀

Case2

 

Paste_Image.png

命令行

 

Paste_Image.png

提出了公共js - init.js

Case3

 

Paste_Image.png

命令行

 

Paste_Image.png

Case4

 

Paste_Image.png

命令行

 

4

**assert 名称 和 chunk 名称 不一样了 **

Case5

 

5

命令行

 

Paste_Image.png

Case6

 

Paste_Image.png

命令行

 

Paste_Image.png

此时common.js中仅仅有module-require函数

Case7

 

Paste_Image.png

命令行

 

Paste_Image.png

此时common.js提取出了config.json和Greeter.js

Case8

 

Paste_Image.png

命令行

 

Paste_Image.png

common.js提取出了所有的js，此时 main.js 和 second.js中的代码仅有一行

webpackJsonp([0,1],[]);

Case9

 

Paste_Image.png

命令行

 

Paste_Image.png

**仅仅提出了 module-require 公共部分 ，其他公共模块并不抽取 **

Case 10

 

Paste_Image.png

命令行

 

Paste_Image.png

Case11

 

Paste_Image.png

命令行

 

Paste_Image.png

总结

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）：创建公共块之前所有公共模块的最小大小。