打包第三方控件;比如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. datanode与namenode的通信

    在分析DataNode时, 因为DataNode上保存的是数据块, 因此DataNode主要是对数据块进行操作. A. DataNode的主要工作流程1. 客户端和DataNode的通信: 客户端向D ...

  2. js学习笔记33----DOM操作

    前面有讲过一些DOM的基本概念. 今天来说一下DOM 的一些基本操作,主要有创建节点,追加节点,删除节点. 1.创建DOM元素: createElement(标签名) —— 创建一个节点 append ...

  3. javascript时钟代码 DEMO-002

    转载自:http://www.cnblogs.com/Mygirl/archive/2012/03/30/2425832.html 正常时间显示 复制代码 <SCRIPT language=ja ...

  4. 用javascript将数据导入Excel

    网上收集的代码 <input type="button" name="out_excel" onclick="AutomateExcel();& ...

  5. GIt的基本知识

    以前已经把git 看过一遍了,由于好久没有用它 ,现在已经忘了.现在呢,要用它进行同步代码,所以呢,我打算记一记,再复习复习. 参考文件:https://git-scm.com/book/zh/v2 ...

  6. python中时间操作总结

    一.time 二.datetime 1.获取当前系统时间 datenow = datetime.datetime.now() 2.将datetime格式的时间转换成str datenow = date ...

  7. Web 服务器配置

    Web 服务器配置在您进行 CGI 编程之前,请确保您的 Web 服务器支持 CGI,并已配置成可以处理 CGI 程序.所有由 HTTP 服务器执行的 CGI 程序,都必须在预配置的目录中.该目录称为 ...

  8. 解决ubuntu下mysql不能远程连接数据库的问题【转】

    Ubuntu10.04上自带的MySQL,执行了root@ubuntu:~#sudo apt-get install mysql安装完mysql-server 启动mysqlroot@ubuntu:~ ...

  9. erlang的catch和 try catch的初步猜测

    一. catch(Fun):似乎可以避免因为 函数Fun内的错误而造成的当前的进程的崩溃.

  10. ThinkPHP导出CSV、Excel

    Thinkphp/Library/Think下新文件文件:Csv.class.php <?php namespace Think; class Csv { //导出csv文件 public fu ...