文档章节

[转] Webpack-CommonsChunkPlugin

o
 osc_mervd488
发布于 2018/04/23 22:29
字数 659
阅读 11
收藏 0

精选30+云产品,助力企业轻松上云!>>>

当前项目结构

 
项目结构

其中

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



o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
TypeError: this.addChunk is not a function 的解决方法

用webpack提取公共模块,通常会用到CommonsChunkPlugin插件。 CommonsChunkPlugin用法如下: var webpack = require('webpack'); var config = { }; module.exports = config; 但在webpack打......

osc_sd6nmwhn
2018/04/14
2
0
Webpack CommonsChunkPlugin插件研究

起因 公司的旧项目仍然在使用Webpack3。提取公共代码依然使用的是CommonsChunkPlugin插件,所以需要研究一下CommonsChunkPlugin的用法。 但是官方文档的对于此插件的解释,让我感受不到这个插...

猎户座小陈
2019/07/16
0
0
CommonsChunkPlugin VS SplitChunksPlugin

等了好久终于等到你, webpack团队人员卧薪尝胆五个多月的时间终于带来的webpack4.0,个人觉得webpack4带来的最大优化便是对于懒加载块拆分的优化,删除了CommonsChunkPlugin,新增了优化后的...

osc_kjmfkyv9
2018/07/22
2
0
Vue(基础七)_webpack(CommonsChunkPlug的使用)

---恢复内容开始--- 一、前言 1、多入口文件配置 2、CommonsChunkPlugin的用法 3、在上面例子的基础上,抽离出vue模块 4、接下来需要单独抽离webpack运行文件 5、抽取公共模块 二、主要内容 ...

osc_yw54cj9c
2019/04/07
4
0
Module not found: Error: Cannot resolve 'file' or 'directory' ./cats.js in E:\Git\mmall_fe\src\page\

ERROR in multi index Module not found: Error: Cannot resolve 'file' or 'directory' ./src/page/index/index.js in E:Gitmm allfe @ multi index ERROR in multi login Module not found......

osc_x4nw3ehr
2018/03/31
2
0

没有更多内容

加载失败,请刷新页面

加载更多

linux下java环境搭建

1、jdk下载: 官方地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 如下图所示,我这边选择的是红框中的版本 2、压缩包上传至服务器 将下载的压缩包上传...

wc_飞豆
24分钟前
17
0
面试题:Java对象不再使用时,为什么要赋值为null?

前言 许多Java开发者都曾听说过“不使用的对象应手动赋值为null“这句话,而且好多开发者一直信奉着这句话;问其原因,大都是回答“有利于GC更早回收内存,减少内存占用”,但再往深入问就回...

码农突围
26分钟前
22
0
设计模式(5) 原型模式

原型模式 原型模式的适用场景 浅拷贝 深拷贝 用Initialize方法修改初始化状态 原型模式与之前学习的各种工厂方法、单例模式、建造者模式最大、最直观的区别在于,它是从一个既有的对象“克隆...

zhixin9001
27分钟前
7
0
获取免费的pycharm激活码网站

http://www.lookdiv.com/

云烟成雨forever
27分钟前
27
0
用Helm部署Kubernetes应用,支持多环境部署与版本回滚

1 前言 Helm是优秀的基于Kubernetes的包管理器。利用Helm,可以快速安装常用的Kubernetes应用,可以针对同一个应用快速部署多套环境,还可以实现运维人员与开发人员的职责分离。现在让我们安...

南瓜慢说
28分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部