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
随机推荐
- linux并发concurrency控制
解决竞态(race conditions)最根本的途径是对共享资源的互斥访问,访问共享资源的代码区被称为临界区(critical sections),对临界区的代码需要以某种互斥机制加以保护.常见的互 ...
- 将hive的hql执行结果保存到变量中
这里分别针对shell脚本和python脚本举例: shell脚本如下: 注意:在hive语句左右两边使用的是ESC键下面的点号,不是单引号. #!/usr/bin/env bash test1=`h ...
- Entity Framework管理实体关系(一):管理一对一关系
我们现在已经知道如何使用Code First来定义简单的领域类,并且如何使用DbContext类来执行数据库操作.现在我们来看下数据库理论中的多样性关系,我们会使用Code First来实现下面的几种 ...
- 【安装Python环境】之安装Selenium2时报UnicodeDecodeError: 'utf-8' codec can't decode byte 0xc8 in position 12: invalid continuation byte问题
问题描述: windows8.1系统,Python3环境安装Selenium2时报错,错误如下: ..... ..... File "F:\软件\python3.6.1\lib\site-p ...
- selenium测试(Java)-- 一组元素操作(十一)
利用下面的例子来编写测试脚本 页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="conte ...
- C++中 char *s 和 char s[] 的区别
原因 刚好看到给main传递参数,书上(C++Primer)说“ int main(int argc, char *argv[])也可以写成 int main(int argc, char **arg ...
- 如今在 Internet 上流传的“真正”的程序员据说是这样的
如今在 Internet 上流传的“真正”的程序员据说是这样的: (1) 真正的程序员没有进度表,只有讨好领导的马屁精才有进度表,真正的程序员会让 领导提心吊胆. (2) 真正的程序员不写使用说明书, ...
- (转)学习linux的几本书
成为一名精通 Linux 程序设计的高级程序员一直是不少朋友孜孜以求的目标.根据中华英才网统计数据,北京地区 Linux 程序员月薪平均为 Windows 程序员的 1.8 倍.Java 程序员的 2 ...
- perl 实现ascall 码转换
今天需要在perl中实现一个字母表, 总不能把26个字母一个一个写出来,于是查资料,可以利用ascii码转换把数字转换成对应的字母 chr函数可以利用ascii编码把数字转换成对应的字母 perl - ...
- ImportError: No module named Crypto.Cipher
from Crypto.Cipher import AES 报错: ImportError: No module named Crypto.Cipher 解决方法: pip install pycry ...