当前项目结构

 
项目结构

其中

  • 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. 解决MySQL报错ERROR 2002 (HY000)【转】

    今天在为新的业务线搭架数据库后,在启动的时候报错 root@qsbilldatahis-db01:/usr/local/mysql/bin# ./mysql ERROR 2002 (HY000): C ...

  2. python 字典不区分大小写工具类

    # -*- coding: utf-8 -*- # @Time : 2018/12/20 4:28 PM # @Author : cxa # @File : DictHelper.py # @Soft ...

  3. cocos开发学习记录

    场景的创建和切换 https://blog.csdn.net/lin453701006/article/details/56334578

  4. u3d人物控制

    //https://blog.csdn.net/Htlas/article/details/79188008 //人物移动 http://gad.qq.com/article/detail/28921 ...

  5. mysql开启binlog日志和慢查询日志

    1)首先,为什么要开启binlog日志和慢查询日志呢? binlog日志会记录下数据库的所以增删改操作,当不小心删除.清空数据,或数据库系统出错,这时候就可以使用binlog日志来还原数据库,简单来说 ...

  6. linux TLB表

    TLB - translation lookaside buffer 快表,直译为旁路快表缓冲,也可以理解为页表缓冲,地址变换高速缓存. 由于页表存放在主存中,因此程序每次访存至少需要两次:一次访存获 ...

  7. hybrid programming based on python and C/C++

    Python/C API Reference Manual¶ https://docs.python.org/3/c-api/index.html Extending and Embedding th ...

  8. ubuntu 问题

    1.打开ubuntu之后的开启页面出现:所选模式均不匹配可能的模式:为 CRTC 63 尝试模式CRTC 63:尝试 800x600@60Hz 模式输出在 1366x768@60Hz (通过 0)CR ...

  9. javascript移动端禁止页面滑动的解决方案

    1 前言 移动端网页,发现ios平台的iphone或者ipad,网页可以上下左右移动,而Android版则不会.仅作为记录使用. 2 代码 var mo=function(e){e.preventDe ...

  10. python之hashlib

    简介: 用于加密相关的操作,代替了md5模块和sha模块,主要提供SHA1,SHA224,SHA256,SHA384,SHA512,MD5算法.在python3中已经废弃了md5和sha模块,简单说明 ...