打包插件:
CommonsChunkPlugin
-
如何使用
//安装webpack //webpack.config.js文件中引入webpack模块 // 关于options具体信息请参考官网 cnpm install webpack --save-dev //安装webpack var Webpack = require('webpack') plugins =[ new Webpack.optimize.CommonsChunkPlugin(options)]
实例
新建test
文件夹,在test文件下打开工具git bash
输入npm install webpack --save-dev
,test文件夹下新建下图文件,其中nodule_modules
是安装webpack自动生成的。
实例1.打包单entry入口
// pageOne.js
import childPageOne from './childPageOne'
import childPageTwo from './childPageTwo'
export default 'pageOne'
//childPageOne.js
import moduleTest from './moduleTest'
export default 'moduleTest'
//childPageTwo.js
import moduleTest from './moduleTest'
export default 'moduleTest'
//moduleTest.js
export default 'moduleTest'
//webpack.config.js
var Webpack = require('webpack')
var path = require('path')
module.exports = {
entry: {
pageOne: './src/pageOne'
},
output: {
path: resolve(__dirname, './dist')
filename: '[name].bundle.js'
}
plugins: [
new Webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: 2
}]
}
pageA引入两个子模块,而childPageOne和childPageTwo又用到了moduleTest,我们希望把公共的模块moduleTest单独提取出来。
git bash: webpack
看下打包后的结果。
在dist目录下看pageOne.bundle.js可以看到公共模块moduleTest并没有被打包成单独的模块。
这是为什么呢?我们来看下配置文件,只有一个entry,当项目只有单entry时是无法提取公共代码的,(注意这并不意味着webpack不能对SPA进行公共代码提取。)
实例2
src目录下新增pageTwo.js
// pageTwo.js
import './childPageOne'
import './childPageTwo'
export default 'pageTwo'
修改配置文件新增一个entry入口
//webpack.config.js
entry: {
pageOne: './src/pageOne',
pageTwo: './src/pageTwo'
}
打包并分析
dist目录下生成三个文件分别是pageOne.bundle.js,pageTwo.bundle.js,comon.bundle.js
,在pageOne.bundle.js和pageTwo.bundle.js
中我们可以看到module_test
和childPageOne
,childPageTwo
没有了,已经放到common.bundle.js
中。这说明公共代码提取成功。
接下来我们要做的一件事就是修改配置文件,将minChunks由2变为3,告诉打包插件,只有公用模块三次及以上才被打包进common.bundle.js。但此时moduleTest只是被childPageOne,和childPageTwo使用,出现两次,所以moduletTest是不会被打包进公共代码的。运行后的打包结果也确实如此。
实例3 打包第三方框架代码并和webpack代码放在一起
以jquery为例,test文件夹下启动git bash
: npm install jquery --save
pageOne.js引入jquery。
import Jquery from 'jquery' //新增
第一种情况:不对jquery进行单独打包。也就是配置文件中删除plugins选项。
这是可以看到打包后的pageOne.bundle.js文件特别大,因为包含了jquery代码。
第二种情况,对jquery进行单独打包并和webpack生成的代码放在一起。修改webpack.config.js
var Webpack = require('webpack')
var path = require('path')
module.exports = {
entry: {
pageOne: './src/pageOne.js',
pageTwo: './src/pageTwo.js',
vendor: ['jquery'] //vendor数组中写插件的名字。
},
output: {
path: path.resolve(__dirname,'./dist'),
filename:'[name].bundle.js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new Webpack.optimize.CommonsChunkPlugin({
name: 'vendor', //name值为vendor
minChunks: Infinity //Infinity
})
]
}
按照以上配置我们来分析打包后的代码。
- pageOne.bundle.js中jquery代码没有
- vendor.bundle.js中生成了jquery代码和webpack自身代码(
webpackJsonp
). - pageOne和pageTwo公共代码没有被打包。
实例4.
将框架插件代码和webpack自身代码打包成不同chunks.
在实际项目中,有webpack自身生成的代码,有引入第三方框架的代码,打包时,我们想把webpack代码和公共代码分别打包,那么该如何做呢?
只需要新建一个插件实例。
我们将实例三中的jquery和webpack的代码分别打包,修改webpack.config.js
var Webpack = require('webpack')
var path = require('path')
module.exports = {
entry: {
pageOne: './src/pageOne.js',
pageTwo: './src/pageTwo.js',
vendor: ['jquery']
},
output: {
path: path.resolve(__dirname,'./dist'),
filename:'[name].bundle.js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new Webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
}),
new Webpack.optimize.CommonsChunkPlugin({ //新建一个插件实例
name: 'webpack', //name区别于entry的键值名
minChunks: Infinity
})
]
}
这样打包后分析打包后的文件可以看到
- webpack代码和jquery代码分别打包了。
- pageOne pageTwo中公共代码还是没有打包
实例5 单独打包框架,webpack,和公共模块。
同样新建一个插件实例,并在chunks中限定打包范围
var Webpack = require('webpack')
var path = require('path')
module.exports = {
entry: {
pageOne: './src/pageOne.js',
pageTwo: './src/pageTwo.js',
vendor: ['jquery']
},
output: {
path: path.resolve(__dirname,'./dist'),
filename:'[name].bundle.js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new Webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: 2, //出现两次及以上
chunks:['pageOne', 'pageTwo'] //通过entry的name限定范围,以数组形式
}),
new Webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
}),
new Webpack.optimize.CommonsChunkPlugin({
name: 'webpack',
minChunks: Infinity
})
]
}
实例6 打包多个插件,同时打包入口文件的公共代码,和webpack自身代码
安装better-scroll(或者其他插件):npm install better-scroll --save
pageTwo.js中引入better-scroll
: import BScroll from 'better-scroll'
var Webpack = require('webpack')
var path = require('path')
module.exports = {
entry: {
pageOne: './src/pageOne.js',
pageTwo: './src/pageTwo.js',
vendor: ['jquery','better-scroll'] //数组中新增插件better-scroll
},
output: {
path: path.resolve(__dirname,'./dist'),
filename:'[name].bundle.js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new Webpack.optimize.CommonsChunkPlugin({ //打包公共模块
name: 'common',
minChunks: 2,
chunks:['pageOne', 'pageTwo']
}),
new Webpack.optimize.CommonsChunkPlugin({ //打包插件
name: 'vendor',
minChunks: Infinity
}),
new Webpack.optimize.CommonsChunkPlugin({
name: 'webpack',
minChunks: Infinity
})
]
}
打包后返现,better-scroll
和jquery
代码都被打包进vendor.bundle.js
中。
本文介绍了webpack打包公共代码的几种情况,着重介绍了几个简单的例子,实际项目中配置可能更加复杂,但都是建立在基础之上。