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资料——线性表(转)
			
线性表 线性表(亦作顺序表)是最基本.最简单.也是最常用的一种数据结构.线性表中数据元素之间的关系是一对一的关系,即除了第一个和最后一个数据元素之外,其它数据元素都是首尾相接的.线性表的逻辑结构简单, ...
 - win10设置删除文件提示框
			
显示桌面,找到回收站 点击鼠标右键,点击“属性菜单” 勾选“显示删除对话框” 点击“应用”,点击“确定”. 测试一下吧,从电脑删除del删除一个文件.如下图所示,弹出了提示框.
 - iOS开发小技巧--tableView中实现无数据无分割线,有数据才有分割线
			
通过通讯录练习GET的技能
 - spring配置事务 元素 "tx:annotation-driven" 的前缀 "tx" 未绑定
			
在进行spring与mybatis整合时,启动项目报错,控制台提示“元素 "tx:annotation-driven" 的前缀 "tx" 未绑定”. 经过查找, ...
 - Linux命令 cat命令
			
这个命令可不是“猫”的意思,而是catenate的缩写.顾名思义,是把东西串起来.比如:cat file1 file2就是把文件file1和file2连在一起,然后输出到屏幕上.注意,输出到屏幕上是c ...
 - android boot.img unpack pack
			
每次编译boot.img都要花比较长的时间,有时候只是更改其中的配置文件. 如果能够将boot.img解压,更改之后再打包的话,就能节省时间. boot.img tools是别人写好的工具,能很好的解 ...
 - linux 打包 解压 tar zip tgz
			
.tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)------------------------- ...
 - 在C语言中实现面向对象(2)
			
C语言是结构化和模块化的语言,它是面向过程的.但它也可以模拟C++实现面向对象的功能.那么什么是对象呢?对象就是一个包含数据以及于这些数据有关的操作的集合,也就是包含数据成员和操作代码(即成员函数). ...
 - Android检测Cursor泄漏的原理以及使用方法(转)
			
简介: 本文介绍如何在 Android 检测 Cursor 泄漏的原理以及使用方法,还指出几种常见的出错示例.有一些泄漏在代码中难以察觉,但程序长时间运行后必然会出现异常.同时该方法同样适合于其他需要 ...
 - sql字符串的拼接 (字符串和二进制,erlang的mysql驱动)
			
1> list_to_binary(["select * from aa limit","1",",","97"] ...