################webpack 打包公共代碼###############
提取公用代碼：模塊化開發(fā)，公共模塊
1.減少代碼的冗余 很多頁面都有的公共代碼
2.提高用戶的加載速度? 公共代買加載一次多處使用
################CommonsChunkPlugin 公共塊插件###############
使用 webpack CommonsChunkPlugin 插件將公共的代碼提取出來
配置: 這個插件是webpack自帶的
module.exports = {
entry:{'app':'app.ts'},
output:{filename:'[name].bundle.js'},
module:{
rulse:[
{
test:/\.tsx?$ /,
use:{
loader:'ts-loader'
}
}
]
}
plugins:[
new webpack.optimize.CommonsChunkPlugin(option)
]
}
################結(jié)構(gòu)###############
node_modules
dist
src
? moduleA.js
? pageA.js
? pageB.js
? subPageA.js
? subPageB.js
package.json
webpack.config.js
################webpack 提取公用代碼案例###############
? 這里提取公共代碼需要注意的是，需要多個entry,只有多個entry的時候才會提取
? pageA,pageB 同時導(dǎo)入了 subPageA,subPageB 所以他們被打包到 common.bundle.js中
? 將第三方引入的代碼 打包到公共代碼中 name : 'vendor',minChunks:Infinity
pageA.js 內(nèi)容如下
import './subPageA'
import './subPageB'
這里引入的是第三方依賴需要npm安裝的，打包到common公共代碼中，并且是和 webpack自己生產(chǎn)的代碼在一起，形成共同的依賴
import * as _ from 'lodash'?
export default 'pageA'? ? 使用es6模塊化語法 暴露自己
pageB.js 內(nèi)容如下
import './subPageA'
import './subPageB'
import * as _ from 'lodash'
export default 'pageB'
subPageA.js
import './moduleA'
export default 'subPageA'? 對自己做標(biāo)識
subPageB.js
import './moduleA'
export default 'subPageB'
moduleA.js
export default 'moduleA'
webpack.config.js
var webpack =require('webpack')
var path = require('path')
module.exports = {
entry:{
'pageA':'./src/pageA',
'pageB':'./src/pageB',
再打包完自己的公共代碼之后，打包依賴的第三方引用包
'vendor':['lodash'] 這里集中打包第三方引用包
},
output:{
path:path.resolve(__dirname , './dist'),
filename : '[name].bundle.js',
chunkFilename: '[name].chunk.js'
},?
plugins:[
這個實(shí)例打包 pageA,pageB公共的代碼
new webpack.optimize.CommonsChunkPlugin({
name:'common',? ? 公共代碼打包插件
minChunks:2,? ? 到其他模塊中找公共代碼
指定需要打包的公共代碼的頁面
chunks:['pageA','pageB']
}),
這個實(shí)例打包 依賴的第三方的包 npm 安裝的，比如lodash，jq
new webpack.optimize.CommonsChunkPlugin({
第三方依賴包 方在數(shù)組wendor中集體打包
這里要注意順序，第三方依賴包數(shù)組 vendor在前，webpack生成代碼在后
name : ['vendor','manifest'],?
minChunks:Infinity?
}),
/*? 將 name:[] 改成數(shù)組形式可以合并代碼
新實(shí)例化，可以將第三方依賴包與webpack生成代碼分開打包
new webpack.optimize.CommonsChunkPlugin({
name : 'manifest', 隨意的一個名字?
minChunks:Infinity?
})
*/]?
}
