当前项目结构

 
项目结构

其中

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

[转] Webpack-CommonsChunkPlugin的更多相关文章

  1. webpack CommonsChunkPlugin详细教程

    1.demo结构: 2.package.json配置: { "name": "webpack-simple-demo", "version" ...

  2. [Webpack 2] Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

    If you have a multi-page application (as opposed to a single page app), you’re likely sharing module ...

  3. [Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin

    Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsCh ...

  4. webpack CommonsChunkPlugin 提取公共代码

    1.项目结构 2.部分代码 module.js console.log('module.js'); index文件夹下的index.js require('../module.js'); consol ...

  5. [转]webpack——CommonsChunkPlugin

    作用虽然webpack4已经出来很久了,CommonsChunkPlugin也已经舍弃了,但是还是有很多项目是通过webpack3来打包的,对CommonsChunkPlugin各个配置项的认识还是比 ...

  6. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  7. Webpack+React+ES6入门指南[转]

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  8. webpack 多页应用架构系列实战

    阅读目录 1.webpack配置了解 2.webpack CommonsChunkPlugin公共代码剥离 3.了解ProvidePlugin的用途 回到顶部 1.webpack配置了解 webpac ...

  9. React的React Native

    React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...

  10. 关于webpack.optimize.CommonsChunkPlugin的使用二

    Note:当有多个入口节点的时候,只有所有入口节点都引入了同一个模块的时候,webpack.optimize.CommonsChunkPlugin才会将那个模块提取出来,如果其中一个入口节点没有引入该 ...

随机推荐

  1. 【转】C++标准转换运算符static_cast

    static_cast<new_type> (expression) 虽然const_cast是用来去除变量的const限定,但是static_cast却不是用来去除变量的static引用 ...

  2. nginx负载均衡优化配置

    针对nginx做负载均衡时其中一台服务器挂掉宕机时响应速度慢的问题解决 nginx会根据预先设置的权重转发请求,若给某一台服务器转发请求时,达到默认超时时间未响应,则再向另一台服务器转发请求. 默认超 ...

  3. Css样式压缩、美化、净化工具 源代码

    主要功能如下: /* 美化:格式化代码,使之容易阅读 */ /* 净化:将代码单行化,并去除注释 */ /* 压缩:将代码最小化,加快加载速度 */ /* 以下是演示代码 */ /*reset beg ...

  4. POJ 1305

    毕达哥斯三元组的模板题 练习练习 #include<iostream> #include<cstring> #include<cstdio> #include< ...

  5. [POSIX]文件系统(概述)

    1.文件名由除系统目录分隔符(unix是/,windows是\)和空字符“\0”外的任意ASCII字符组成,现代系统很多还可以包含UNICODE字符,但是还是推荐使用传统的ASCII码命名. 2.目录 ...

  6. Redis重大版本

    Redis借鉴了Linux操作系统对于版本号的命名规则: 版本号第二位如果是奇数,则为非稳定版本(例如2.7.2.9.3.1),如果是偶数,则为稳定版本(例如2.6.2.8.3.0.3.2), 当前奇 ...

  7. dubbo @Activate 注解使用和实现解析

    Activate注解表示一个扩展是否被激活(使用),可以放在类定义和方法上, dubbo用它在spi扩展类定义上,表示这个扩展实现激活条件和时机. 先看下定义: @Documented @Retent ...

  8. 反转链表算法Java实现

    之前遇到反转链表的算法,比较晦涩难解,但其实挺简单的. 目标:将一个顺序链表反转. 思路:用三个辅助节点,每次实现一个节点的指向反转,即他的后继变为他的前驱. 三个辅助节点: p  q  r  按顺序 ...

  9. Modbus库开发笔记之五:Modbus RTU Slave开发

    Modbus在串行链路上分为Slave和Master,这一节我们就来开发Slave.对于Modbus RTU从站来说,需要实现的功能其实与Modbus TCP的服务器端是一样的.其操作过程也是一样的. ...

  10. SpringMVC简介

    一.SpringMVC 是什么? 后续编辑,先上Demo>> SpringMVCDemo