[Webpack 2] Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin
If you have a multi-page application (as opposed to a single page app), you’re likely sharing modules between these pages. By chunking these common modules into a single common bundle, you can leverage the browser cache much more powerfully. In this lesson we’ll use webpack’s CommonsChunkPlugin to easily share common modules between apps.
const webpack = require('webpack')
const {resolve} = require('path')
module.exports = env => {
return {
entry: {
app: './js/app.js',
animalFacts: './animal-facts/js/app.js',
},
output: {
filename: 'bundle.[name].js',
path: resolve(__dirname, 'dist'),
pathinfo: !env.prod,
},
context: resolve(__dirname, 'src'),
devtool: env.prod ? 'source-map' : 'eval',
bail: env.prod,
module: {
loaders: [
{test: /\.js$/, loader: 'babel!eslint', exclude: /node_modules/},
{test: /\.css$/, loader: 'style!css'},
],
},
plugins: [
env.test ? undefined : new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'bundle.common.js',
chunks: ['app', 'animalFacts']
}),
].filter(p => !!p),
}
}
[Webpack 2] Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin的更多相关文章
- ansible common modules
##Some common modules[cloud modules] [clustering modules] [command modules]command - executes a comm ...
- 【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧!
[前言]:因为最近在搞百度地图API的时候到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的"收尾工作"--即打包,而没有把它纳入到 ...
- 【webpack学习笔记(一)】流行的前端模块化工具webpack初探
从开发文件到生产文件 有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...
- webpack前端构建工具学习总结(一)之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- webpack前端构建工具学习总结(三)之webpack.config.js配置文件
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...
- [Webpack + React] Import CSS Modules with TypeScript and webpack
If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webp ...
- webpack学习之——模块(Modules)
在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块. 每个模块具有比完整程序更小的接触面,使得校验.调试.测试轻而易举. 精 ...
- Hashtable insert failed. Load factor too high. The most common cause is multiple threads writing to the Hashtable simultaneously
暂时也没准确定位到问题 https://support.microsoft.com/zh-cn/help/2803754/hotfix-rollup-2803754-is-available-for- ...
- Webpack实战(八):教你搞懂webpack如果实现代码分片(code splitting)
2020年春节已过,本来打算回郑州,却因为新型冠状病毒感染肺炎的疫情公司推迟了上班的时间,我也推迟了去郑州的时间,在家多陪娃几天.以前都是在书房学习写博客,今天比较特殊,抱着电脑,在楼顶晒着太阳,陪着 ...
随机推荐
- 【HDU 2853】Assignment (KM)
Assignment Problem Description Last year a terrible earthquake attacked Sichuan province. About 300, ...
- USB究竟是什么?看完这篇文章我就明白了!
在早期,USB接口的出现似乎仅仅是要解决一些简单外设诸如鼠标.键盘之类的设备与电脑的连接问题,很显然,这些外设所产生的数据量是极低的,所以,USB规范所定义的数据速率是1.5Mbps,数据还是双向分时 ...
- FishEye简介
前言 在项目开发过程中,随着开发的进行,将有大量的代码编写提交到代码仓库,如何能全面准确的了解源代码的变化,提交的频率,代码量的趋势,发现代码的缺陷,将是控制源代码质量的重要指标,这个时候一个 ...
- IIS中的Application.CommonAppDataPath
C:\ProgramData\Microsoft Corporation\Internet Information Services\7.5.7600.16385
- Learning WCF Chapter1 Hosting a Service in IIS
How messages reach a service endpoint is a matter of protocols and hosting. IIS can host services ov ...
- 数据库设主键以及where的应用
二.第二课 create table teacher ( tno int primary key identity(1,1), --将tno设为主键(primary key identity(1,1 ...
- Ext.onReady(function(){} )函数的作用域分析(1)
Ext.onReady(function(){ var genResultDelete = function(){ alert('delete') ; } var renderResult = fun ...
- Apache Struts 跨站脚本漏洞
漏洞名称: Apache Struts 跨站脚本漏洞 CNNVD编号: CNNVD-201311-010 发布时间: 2013-11-04 更新时间: 2013-11-04 危害等级: 漏洞类型 ...
- [Qt]Qt中TreeWidget拖拽事件
文章在简书里啦 http://www.jianshu.com/p/45b740060aca
- HDOJ/HDU 2087 剪花布条(indexOf()应用~~)
Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input 输入 ...