[Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin
Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsChunkPlugin to automatically put these modules in a separate bundled file so they can be cached and loaded separately from the rest of your code (leveraging the browser cache much more effectively).
The libaraies like 'lodash', 'jquery' are required alomost all the projects and once download, rarly change any more. So it would be a good idea to spreate those common libaries into a common vendor file.
entry: {
app: './js/app.js',
vendor: ['lodash', 'jquery'],
},
So rename the entry, add 'app' and 'vendor' entries.
So the output file canbe named like 'bundle.app.js' and 'bundle.vendor.js':
output: {
filename: 'bundle.[name].js',
path: resolve(__dirname, 'dist'),
pathinfo: true,
},
We will use webpack build in CommonsChunkPlugin:
plugins: [
isTest ? undefined : new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
}),
].filter(p => !!p),
Now we can include those two bundle files into index.html:
<script src="/bundle.vendor.js"></script>
<script src="/bundle.app.js"></script>
[Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin的更多相关文章
- webpack入门(二)what is webpack
webpack is a module bundler.webpack是一个模块打包工具,为了解决上篇一提到的各种模块加载或者转换的问题. webpack takes modules with dep ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- webpack构建多页面react项目(webpack+typescript+react)
目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件 ...
- webpack安装低于4版本(没有配置webpack.config.js)
webpack安装低于4版本(没有配置webpack.config.js) webpack 无需配置输出参数-o 低版本 1.初始化项目 npm init -y 初始化项目 2.安装webpack@ ...
- webpack笔记_(2)_Refusing to install webpack as a dependency of itself
安装webpack时,出现以下问题: Refusing to install webpack as a dependency of itself npm ERR! Windows_NT npm ERR ...
- 【Webpack】373- 一看就懂之 webpack 高级配置与优化
本文原载于 SegmentFault 社区专栏 前海拾贝 作者:JS_Even_JS 一.打包多页面应用 所谓打包多页面,就是同时打包出多个 html 页面,打包多页面也是使用 html-webpac ...
- Webpack学习笔记一:What is webpack
#,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...
- webpack需要全局安装,才能使用webpack命令
webpack全局安装,具体项目中才能使用webpack命令: npm install webpack -g
- [Webpack 2] Expose modules to dependencies with Webpack
When you have a dependency that has dependencies on global variables (like jQuery or lodash) or assu ...
随机推荐
- Python socket编程应用
最近因为考试各种复习顺便刷电视剧,感觉跟小伙伴玩的越来越不开心了,一定是最近太闲了,恩.于是想研究一下代理服务器,下载了一份代码,发现竟然还涉及到socket编程,所以把之前网络课的socket聊天室 ...
- shutdown computer in ad and ou
1. powershell Shutdown-computer –computername (gc c:\temp\serverlist.txt) –force –throttlelimit 10 h ...
- 【转载】C++的文件和流
http://www.iteedu.com/plang/ccpp/cppdxjch2b/111.php C++语言把每一个文件都看成一个有序的字节流(见图14.2),每一个文件或者以文件结束符(end ...
- 关于MATLAB中的tic toc的问题
关于MATLAB中的tic toc的问题 其一) MATLAB实际单位时间计时函数的具体应用,在编写程序时,经常需要获知代码的执行实际时间,这就需要在程序中用到计时函数,matlab中提供了以下三种方 ...
- csu 10月 月赛 F 题 ZZY and his little friends
一道字典树异或的题,但是数据比较水,被大家用暴力给干掉了! 以前写过一个类似的题,叫做the longest xor in tree: 两个差不多吧! 好久没写字典树了,复习一下! 代码: #incl ...
- Java 构造器 一道构造器调用子类重载方法的题目
构造器中不能new本类对象,否则进入死循环. 构造器没有返回值,也没有void修饰. 使用关键字super可以调用父类的构造器,而且这一句必须放在第一句的位置,否则无法编译. 题目: 请写出以下程序的 ...
- webview调用javascript脚本无反应
最近遇到一个问题:在html中有一段javascript脚本定义了一个方法,在使用webview.loadUrl("javascript:方法名()")时方法未执行,后来 查资料发 ...
- iOS设备下添加button的按下效果
在触屏上, button的按下效果用:active触发, 但是我发现iOS设备上:active效果并没有生效. :active pseudo-class doesn't work in mobile ...
- Aptana Studio 安装
Aptana Studio 是一个集成式的Web应用程序开发环境,它不仅可以作为独立的程序运行,而且还可以作为Eclipse插件使用. AptanaStudio是一个基于Eclipse的集成式Web开 ...
- System.Windows.Forms中的Message Structure
结构用途说明Implements a Windows message. Properties 1.public IntPtr HWnd { get; set; } Gets or sets the w ...