打包第三方控件;比如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. Windows 2008 R2组策略之二——GPO初探

    与前一篇博文发表已经相去月余了,实在是有些不好意思了.感谢51CTO的大编们将小文加了推荐,这使我更加觉得自己产出太少,难于回馈大家的厚爱. 今天将这个系列的第二篇奉献给大家,以伺视听. 在上篇小文中 ...

  2. iOS边练边学--Segue数据逆传(用block代替delegate)

    一.block与方法的异同点: 相同点是都是保存代码段,什么时候执行,什么时候调用 不同点是block不受类或者对象的约束:方法收到了类或者对象的约束 二.思路:(通讯录练习) 在联系人控制器中,添加 ...

  3. 在Ubuntu中安装PHP,MySQL,Nginx和phpMyAdmin

    apt install php apt-get install php7.0 apt-get -y install php7.0-fpm 缺少 mysqli 扩展.请检查 PHP 配置. apt in ...

  4. windows 搭建 subversion+TortoiseSVN

    1.版本 (a)Apache 2.2.25:httpd-2.2.25-win32-x86-no_ssl.msi (b)Subversion:Setup-Subversion-1.8.5.msi (c) ...

  5. 深入浅出Cache

    章节 ① 什么是Cache? Cache的目标? ② Caching住哪些内容? ③ 我们想要的Cache产品 ④ Cache使用方式 ⑤ 对于总体系统的提高 ⑥ 关于Sharding ⑦ Cache ...

  6. TopK的一个简单实现

    转自:http://rangerwolf.iteye.com/blog/2119096 题外话: <Hadoop in Action> 是一本非常不错的交Hadoop的入门书,而且建议看英 ...

  7. buildroot制作文件系统

    /******************************************************************* * buildroot制作文件系统 * 使用buildroot ...

  8. javascript -- 原型对象

    原型对象: 每个对象都有一个参考对象,这个参考对象称之为原型对象.原型对象有自己的属性和方法.当A是B的原型对象时,那 么B拥有A中的所有属性和方法. 原型对象的工作原理: 使用原型对象定义一个新的对 ...

  9. android中文api(79)——Gallery

    前言 本章内容是 android.widget.Gallery,版本为Android 2.3 r1,翻译来自"henly.zhang",欢迎大家访问他的博客:http://www. ...

  10. QListView的子项的ViewMode

    QListView.setViewMode(ViewMode mode) enum QListView::ViewMode Constant    Value    DescriptionQListV ...