webpack提取公共代码

今天学了webpack的提取公共代码。记录一下：

为什么要提取公共代码，简单来说，就是减少代码冗余，提高加载速度。

这里要用到两个插件：

• commonChunkPlugin
• webpack.optimize.commonsChunkPlugin

1. 配置：plugins：[new webpack.optimize.commonsChunkPlugin(option)]
2. 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、公共代码都提取了。

打包结果如下：

到此，结束。