webpack提取公共代码

今天学了webpack的提取公共代码。记录一下：
为什么要提取公共代码，简单来说，就是减少代码冗余，提高加载速度。
这里要用到两个插件：
commonChunkPlugin
webpack.optimize.commonsChunkPlugin
配置：plugins：[new webpack.optimize.commonsChunkPlugin(option)]
option里面是一个json，配置如下
options.name: chunk的名称
options.filename: 公用代码打包后的名称
options.minChunks: 可以是数字、函数、特殊字符
options.chunks: 提取代码范围
options.children
options.deepChildren
options.asyne
使用场景：单页面应用，单页面应用+第三方依赖，多页面应用+第三方以来+代码生成
继续创建文件，且npm init初始化



pageA 依赖subPageA，subpageB，lodash

import './subpageA.js';import './subPageB';import * as _ from 'lodash';export default 'pageA';subpageA 依赖moduleA

import './moduleA'export default 'subpageA';subpageB也依赖moduleA

import './moduleA'export default 'subpageB';webpack.config.js配置如下：

var webpack = require('webpack');
var path = require('path');
module.exports = { entry: { pageA: './src/pageA' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name:'common', minChunks: 2, // chunks: ['moduleA', 'moduleB'] }) ]}命令行输入webpack打包。
这时候，就会生成文件如下：



这时候公共代码就被打包了。
可是针对多entry单页面是不能打包的，在src中新增加一个pageB
代码如下;

import './subpageA';import './subPageB';import * as _ from 'lodash';
export default 'pageB';

webpack.config.js代码如下

var webpack = require('webpack');var path = require('path');
module.exports = { entry: { pageA: './src/pageA', pageB: './src/pageB', vender: ['lodash'] }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js', chunkFilename: '[name].chunk.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name:'common', minChunks: 2, // 选择提取moduleA和moduleB的公共代码 chunks: ['moduleA', 'moduleB'] }), new webpack.optimize.CommonsChunkPlugin({ name: ['vender', 'mainfest'], minChunks: Infinity }) ]}

这样配置，就可以把第三方的lodash、公共代码都提取了。
打包结果如下：



到此，结束。