webpack 打包公共代码#

################webpack 打包公共代码###############

提取公用代码：模块化开发，公共模块

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)

]

}

################结构###############

node_modules

dist

src

  moduleA.js

  pageA.js

  pageB.js

  subPageA.js

  subPageB.js

package.json

webpack.config.js

################webpack 提取公用代码案例###############

  这里提取公共代码需要注意的是，需要多个entry,只有多个entry的时候才会提取

  pageA,pageB 同时导入了 subPageA,subPageB 所以他们被打包到 common.bundle.js中

  将第三方引入的代码 打包到公共代码中 name : 'vendor',minChunks:Infinity

pageA.js 内容如下

import './subPageA'

import './subPageB'

这里引入的是第三方依赖需要npm安装的，打包到common公共代码中，并且是和 webpack自己生产的代码在一起，形成共同的依赖

import * as _ from 'lodash' 

export default 'pageA'    使用es6模块化语法 暴露自己

pageB.js 内容如下

import './subPageA'

import './subPageB'

import * as _ from 'lodash'

export default 'pageB'

subPageA.js

import './moduleA'

export default 'subPageA'  对自己做标识

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:[

这个实例打包 pageA,pageB公共的代码

new webpack.optimize.CommonsChunkPlugin({

name:'common',    公共代码打包插件

minChunks:2,    到其他模块中找公共代码

指定需要打包的公共代码的页面

chunks:['pageA','pageB']

}),

这个实例打包 依赖的第三方的包 npm 安装的，比如lodash，jq

new webpack.optimize.CommonsChunkPlugin({

第三方依赖包 方在数组wendor中集体打包

这里要注意顺序，第三方依赖包数组 vendor在前，webpack生成代码在后

name : ['vendor','manifest'], 

minChunks:Infinity 

}),

/*  将 name:[] 改成数组形式可以合并代码

新实例化，可以将第三方依赖包与webpack生成代码分开打包

new webpack.optimize.CommonsChunkPlugin({

name : 'manifest', 随意的一个名字 

minChunks:Infinity 

})

*/

] 

}