打包第三方控件;比如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的更多相关文章

  1. 关于webpack.optimize.CommonsChunkPlugin的使用二

    Note:当有多个入口节点的时候,只有所有入口节点都引入了同一个模块的时候,webpack.optimize.CommonsChunkPlugin才会将那个模块提取出来,如果其中一个入口节点没有引入该 ...

  2. webpack.optimize.CommonsChunkPlugin插件的使用

    方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...

  3. 使用webpack.optimize.CommonsChunkPlugin提供公共代码

    在webpack4里使用webpack.optimize.CommonsChunkPlugin时,报错,webpack4删除了常用的 CommonsChunkPlugin ,提示我们用config.o ...

  4. [转] 用webpack的CommonsChunkPlugin提取公共代码的3种方式

    方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...

  5. 详解用webpack的CommonsChunkPlugin提取公共代码的3种方式(注意webpack4.0版本已不存在)

    Webpack 的 CommonsChunkPlugin 插件,负责将多次被使用的 JS 模块打包在一起. CommonsChunkPlugin 能解决的问题 在使用插件前,考虑几个问题: 对哪些 c ...

  6. webpack关于CommonsChunkPlugin在高版本被移除的替代方案问题

    1.在指南的缓存章节里webpack.config.js文件中,使用new的方法会报错 const webpack = require('webpack'); + new webpack.optimi ...

  7. Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimizat

    按照教程上配置文件如下: var webpack=require('webpack'); var HtmlwebpackPlugin=require('html-webpack-plugin'); v ...

  8. 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 ...

  9. webpack.optimize.UglifyJsPlugin配置说明

    https://segmentfault.com/a/1190000008995453?utm_source=tuicool&utm_medium=referral

随机推荐

  1. shell脚本----if(数字条件,字符串条件,字符串为空)

    二元比较操作符,比较变量或者比较数字. 注意数字与字符串的区别. 1.整数比较  -eq 等于,如:if [ "$a" -eq "$b" ] -ne 不等于,如 ...

  2. [LintCode]转换字符串到整数

    问题描述: 实现atoi这个函数,将一个字符串转换为整数.如果没有合法的整数,返回0.如果整数超出了32位整数的范围,返回INT_MAX(2147483647)如果是正整数,或者INT_MIN(-21 ...

  3. Android APP 分享图片文字到微信刚開始正常,后面就不弹出分享框了

    依照官方的流程走了一遍.一切顺利,分享成功了.本来以为能够大功告成了,结果睡了一觉,第二天要给客户演示了.才发现TMD坑爹了,不能分享了,第三方的分享栏弹不出来了.我一阵惊慌,还好非常快找到了解决的方 ...

  4. 内网环境NTP服务及时间同步(CentOS6.x)配置和部署

    目标环境,5台linux centos 6.3, 一台作为NTPD服务与外部公共NTP服务同步时间,同时作为内网的NTPD服务器,其他机器与这台服务做时间同步.  服务器IP 角色   说明 同步方式 ...

  5. 刘昕明:送给和我一样曾经浮躁过的PHP程序员

    作者注:2012年偶决定开始写博客了,不为别的,就希望可以通过博客记录我的成长历程同时也希望可以帮助一些刚毕业,刚入行业的兄弟姐们们.我们是一群充满浮躁.抱怨.迷茫的程序猿,想一想3年就这么过去了,社 ...

  6. kettle启动时候报a fatal exception has occurred

    本人刚接触ETL工具 Data Integration - Kettle ,下载了kettle6.0版本,但是在window +jdk1.7(32位)下启动报错, 使用SpoonDebug.bat写的 ...

  7. Translating between qplot and base graphics

    Translating between qplot and base graphics Description There are two types of graphics functions in ...

  8. Unity3D深入浅出 -组件与节点之间的调用关系

    一.transform组件用途 1.维护场景树 2.对3D物体的平移,缩放,旋转 二.场景树定义 在Hierarchy视图中显示的: 一个game_scene场景,下面有Main Camera节点,D ...

  9. Linux美化终端

    终端美化 不管你是Kali 还是 Centos  还是Ubuntu... 请先用你的安装器安装 zsh 这里以Ubuntu 为例: 终端美化使用的on-my-zsh 首先先介绍一下什么是zsh,zsh ...

  10. svn merge和branch分析

    [转载] 使用svn几年了,一直对分支和合并敬而远之,一来是因为分支的管理不该我操心,二来即使涉及到分支的管理,也不敢贸然使用合并功能,生怕合并出了问题对团队造成不良影响,最主要的原因是,自己对分支的 ...