打包第三方控件;比如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. Python idle安装与使用教程 调试、下载

    Python idle安装与使用教程 调试.下载 今天我们就来讲一下如何安装Python idle编辑器,也它的调试和使用. 第一步,我们先去下载一个Python idle程序安装包. 本节讲的是wi ...

  2. HTML(三):表单元素

    表单元素概述 表单(Form),用于收集用户信息.提交用户请求等处理过程        1.设计表单,并放入一些输入域        2.网站访问者在自己的计算机上填写上述输入域,并提交到服务器端   ...

  3. java-JSP脚本的9个内置对象

    http://blog.csdn.net/titilover/article/details/6800782 http://www.importnew.com/19128.html http://ww ...

  4. HTML5之IndexedDB使用详解

    随着firefox4正式版的推出,IndexedDB正式进入我们的视线.IndexedDB是HTML5-WebStorage的重要一环,是一种轻量级NOSQL数据库.相较之下,WebDataBase标 ...

  5. 关于IOC和DI的理解

    IOC:Inversion of Control 控制反转 DI:Dependency Injection 依赖注入 控制反转,从字面意思来看,就是控制权又被动变主动,最后又变回被动. 举个例子: 你 ...

  6. MySQL,SQLSERVER,ORACLE获取数据库表名及字段名

    1.MySQL 获取表名: 用“show tables”命令.在程序中也可以采用该命令获取,在返回的RowSet中的“Tables_in_db”读出来.其中“db”是指你的数据库的名称,比如说Tabl ...

  7. 转:Python操作SQLServer示例

    注:此文也是转载,2018年1月发现此文阅读量过万,略感不安.当时只是为了自己存档学习,未粘此文的原始连接.如有侵权,通过即删除,敬请谅解! 从网上找的,估计原文是:Python操作SQLServer ...

  8. 一个不错的在线的js调试器

    一个不错的在线的js调试器,可见即可得: http://jsbin.com/

  9. 【Java 线程的深入研究4】ThreadPoolExecutor运转机制详解

    hreadPoolExecutor机制 一.概述 1.ThreadPoolExecutor作为java.util.concurrent包对外提供基础实现,以内部线程池的形式对外提供管理任务执行,线程调 ...

  10. XP 终端服务组件 恢复补丁包 terminal service patch

    terminal 终端服务组件恢复包 下载地址(点击) winconnect server xp软件 下载地址(点击)