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 
随机推荐
- 用lua实现ByteArray和ByteArrayVarint
			许多 Actionscript 程序员已经从 Flash 转到 Cocos2d-x 了.那么以前的那些超级好用的类库都不见了,只好重新来过. 我利用 Lua 和 lpack 库实现了一套 lua版本的 ... 
- Oracle分页(limit方式的运用)
			select * from a_matrix_navigation_map where rowid not in(select rowid from a_matrix_navigation_map w ... 
- MySQL 源代码scr.rpm安装的一点注意事项
			rpm安装包通常为二进制包(Binary)以及源代码包(Source)两种形式. 在使用源代码方式安装MySQL的时候,官方站点上下载的源代码包通常为scr.rpm格式,而不是直接的tar包.对此,须 ... 
- Unix 系统下的 Nginx 1.4.x
			Unix 系统下的 Nginx 1.4.x 本文档包括使用 PHP-FPM 为 Nginx 1.4.x HTTP 服务器安装和配置 PHP 的说明和提示. 本指南假定您已经从源代码成功构建 Nginx ... 
- Tomcat负载均衡和集群环境的搭建
			实现此集群的方法参考了网上的很多文章,但由于很多文章都表明是原创的,故无法知道整个操作流程的真正作者是谁.下面就是我用我们真实的项目去实现这个过程.同时修复这过程中一些问题.以下的所有步骤均为亲自测试 ... 
- css 3 制作水波状进度条
			效果图如下 : 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ... 
- openfire安装配置完全教程
			Java领域的IM解决方案 Java领域的即时通信的解决方案可以考虑openfire+spark+smack. Openfire是基于Jabber协议(XMPP)实现的即时通信服务器端,最新版本是3. ... 
- 逻辑斯特回归(logistic regression)的迭代变权最小平方差算法(IRLS)
			参考资料:http://blog.csdn.net/xuanyuansen/article/details/41050507 习题: 数据及代码: https://pan.baidu.com/s/1 ... 
- imx6 spi分析
			/************************************************************************** *本文主要跟踪imx6 spi设备和驱动的注册过 ... 
- 科技发烧友之单反佳能700d中高端
			http://detail.zol.com.cn/series/15/15795_1.html 前三 佳能 尼康 索尼 佳能5d 1.6w 佳能70d 5k 佳能6d 9k 佳能d7100 5k 尼康 ... 
