webpack.optimize.CommonsChunkPlugin
打包第三方控件;比如jquery,angular,bootstrap。。。。
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
const PATHS = {
app: path.join(__dirname, 'src'),
build: path.join(__dirname, 'build'),
};
module.exports ={
entry: {
app: PATHS.app,
vendor: ['react', 'react-dom', 'react-router', 'classnames']
},
output: {
path: PATHS.build,
filename: "[name].[chunkHash:8].js",
publicPath: '',
chunkFilename: "[name].[chunkHash:8].js",
},
plugins: [
new CommonsChunkPlugin({
names: ['vendor', 'manifest']//manifest:抽取变动部分,防止第三方控件的多次打包
})
]
}
总结:
1,vendor则是通过提取公共模块插件来提取的代码块(webpack本身带的模块化代码部分),而manifest则是在vendor的基础上,再抽取出要经常变动的部分,比如关于异步加载js模块部分的内容。
2,我们可以加上hash来查看,在未变动的情况下,是否又重新打包;
3,第三方控件只用打包一次就可以了。
webpack.optimize.CommonsChunkPlugin的更多相关文章
- 关于webpack.optimize.CommonsChunkPlugin的使用二
Note:当有多个入口节点的时候,只有所有入口节点都引入了同一个模块的时候,webpack.optimize.CommonsChunkPlugin才会将那个模块提取出来,如果其中一个入口节点没有引入该 ...
- webpack.optimize.CommonsChunkPlugin插件的使用
方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...
- 使用webpack.optimize.CommonsChunkPlugin提供公共代码
在webpack4里使用webpack.optimize.CommonsChunkPlugin时,报错,webpack4删除了常用的 CommonsChunkPlugin ,提示我们用config.o ...
- [转] 用webpack的CommonsChunkPlugin提取公共代码的3种方式
方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...
- 详解用webpack的CommonsChunkPlugin提取公共代码的3种方式(注意webpack4.0版本已不存在)
Webpack 的 CommonsChunkPlugin 插件,负责将多次被使用的 JS 模块打包在一起. CommonsChunkPlugin 能解决的问题 在使用插件前,考虑几个问题: 对哪些 c ...
- webpack关于CommonsChunkPlugin在高版本被移除的替代方案问题
1.在指南的缓存章节里webpack.config.js文件中,使用new的方法会报错 const webpack = require('webpack'); + new webpack.optimi ...
- Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimizat
按照教程上配置文件如下: var webpack=require('webpack'); var HtmlwebpackPlugin=require('html-webpack-plugin'); v ...
- Can someone explain Webpack's CommonsChunkPlugin
I get the general gist that the CommonsChunkPlugin looks at all the entry points, checks to see if t ...
- webpack.optimize.UglifyJsPlugin配置说明
https://segmentfault.com/a/1190000008995453?utm_source=tuicool&utm_medium=referral
随机推荐
- Java NIO使用及原理分析(二)(转)
在第一篇中,我们介绍了NIO中的两个核心对象:缓冲区和通道,在谈到缓冲区时,我们说缓冲区对象本质上是一个数组,但它其实是一个特殊的数组,缓冲区对象内置了一些机制,能够跟踪和记录缓冲区的状态变化情况,如 ...
- [Django学习]中间件
中间件 是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出 激活:添加到Django配置文件中的MIDDLEWARE_CLASSES元组中 每个中间件 ...
- warning: incompatible implicit declaration of built-in function 'exit'
warning: incompatible implicit declaration of built-in function 'exit' 解决方法: 在头文件里 引入 stdlib 文件, #i ...
- 嘿, 你知道吗, 再也不需要for循环了!
做一个优雅的程序员 JavaScript是一门优雅的语言, 这个'优雅'体验在JS逻辑层次处于高段位的水平, 什么意思呢, 就是一个js应用的主线剧情一定全部是函数式表达的高层可读逻辑, 还是不懂? ...
- 关于Unity中的定时器和委托
一.Invoke定时器 有3种定时器,这里我们讲Invoke 1.创建一个Canvas 2.对Canvas进行初始化 3.创建一个Image的UI节点作为Canvas的子节点,名字叫bg,拖进背景图片 ...
- 关于Cocos2d-x中自己定义的类的名字和Cocos2d-x引擎库中的类的名字重复的解决方法
方法一: 修改自己定义的类的名字,VS2013中可以用Ctrl+H来替换某个特定的单词,Ctrl+F是用来查询某个单词所在的位置或者有没有存在. 方法二: 1.给自己定义的类的.h和.cpp文件的整体 ...
- 如果参数是指针,且仅作输入用,则应在类型前加 const,以防止该 指针在函数体内被意外修改
如果参数是指针,且仅作输入用,则应在类型前加 const,以防止该 指针在函数体内被意外修改. #include <iostream> /* run this program using ...
- php 错误和异常处理
一.错误和异常处理 1.1 错误类型和基本的调试方法 PHP程序的错误发生一般归属于下列三个领域: 语法错误: 语法错误最常见,并且也容易修复.如:代码中遗漏一个分号.这类错误会阻止脚本的执行. 运行 ...
- Ubuntu Server 下配置静态网络的方法
这几天一直在弄hadoop的集群,由于公司的网络原因,偶尔要重启路由器,如果网络是由路由器自动配置的话, 非常容易变换IP,这样的话,SSH无密码验证登陆到其他机器发送的配置文件*.pub就用不了,因 ...
- make的自动变量和预定义变量
make的自动变量 $@ 规则目标的文件名.如果目标是档案文件的一个成员,"$@"就是档案文件的名称 $% 当目标是档案文件的一个成员时,"$%"是该成员的名称 ...