[转] 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 配置

当配置 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):创建公共块之前所有公共模块的最小大小。
[转] Webpack-CommonsChunkPlugin的更多相关文章
- webpack CommonsChunkPlugin详细教程
1.demo结构: 2.package.json配置: { "name": "webpack-simple-demo", "version" ...
- [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 ...
- [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 ...
- webpack CommonsChunkPlugin 提取公共代码
1.项目结构 2.部分代码 module.js console.log('module.js'); index文件夹下的index.js require('../module.js'); consol ...
- [转]webpack——CommonsChunkPlugin
作用虽然webpack4已经出来很久了,CommonsChunkPlugin也已经舍弃了,但是还是有很多项目是通过webpack3来打包的,对CommonsChunkPlugin各个配置项的认识还是比 ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack 多页应用架构系列实战
阅读目录 1.webpack配置了解 2.webpack CommonsChunkPlugin公共代码剥离 3.了解ProvidePlugin的用途 回到顶部 1.webpack配置了解 webpac ...
- React的React Native
React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...
- 关于webpack.optimize.CommonsChunkPlugin的使用二
Note:当有多个入口节点的时候,只有所有入口节点都引入了同一个模块的时候,webpack.optimize.CommonsChunkPlugin才会将那个模块提取出来,如果其中一个入口节点没有引入该 ...
随机推荐
- 【转】C++标准转换运算符static_cast
static_cast<new_type> (expression) 虽然const_cast是用来去除变量的const限定,但是static_cast却不是用来去除变量的static引用 ...
- nginx负载均衡优化配置
针对nginx做负载均衡时其中一台服务器挂掉宕机时响应速度慢的问题解决 nginx会根据预先设置的权重转发请求,若给某一台服务器转发请求时,达到默认超时时间未响应,则再向另一台服务器转发请求. 默认超 ...
- Css样式压缩、美化、净化工具 源代码
主要功能如下: /* 美化:格式化代码,使之容易阅读 */ /* 净化:将代码单行化,并去除注释 */ /* 压缩:将代码最小化,加快加载速度 */ /* 以下是演示代码 */ /*reset beg ...
- POJ 1305
毕达哥斯三元组的模板题 练习练习 #include<iostream> #include<cstring> #include<cstdio> #include< ...
- [POSIX]文件系统(概述)
1.文件名由除系统目录分隔符(unix是/,windows是\)和空字符“\0”外的任意ASCII字符组成,现代系统很多还可以包含UNICODE字符,但是还是推荐使用传统的ASCII码命名. 2.目录 ...
- Redis重大版本
Redis借鉴了Linux操作系统对于版本号的命名规则: 版本号第二位如果是奇数,则为非稳定版本(例如2.7.2.9.3.1),如果是偶数,则为稳定版本(例如2.6.2.8.3.0.3.2), 当前奇 ...
- dubbo @Activate 注解使用和实现解析
Activate注解表示一个扩展是否被激活(使用),可以放在类定义和方法上, dubbo用它在spi扩展类定义上,表示这个扩展实现激活条件和时机. 先看下定义: @Documented @Retent ...
- 反转链表算法Java实现
之前遇到反转链表的算法,比较晦涩难解,但其实挺简单的. 目标:将一个顺序链表反转. 思路:用三个辅助节点,每次实现一个节点的指向反转,即他的后继变为他的前驱. 三个辅助节点: p q r 按顺序 ...
- Modbus库开发笔记之五:Modbus RTU Slave开发
Modbus在串行链路上分为Slave和Master,这一节我们就来开发Slave.对于Modbus RTU从站来说,需要实现的功能其实与Modbus TCP的服务器端是一样的.其操作过程也是一样的. ...
- SpringMVC简介
一.SpringMVC 是什么? 后续编辑,先上Demo>> SpringMVCDemo