webpack打包生成多个vendor的配置方法

用webpack打包项目的时候,一般喜欢把一些公用的库打包的vendor.js里面,比如像react,react-router,redux等。

随着引入的库越来越多,vendor文件也变得越来越大,于是考虑打包成两个vendor,把和react相关的库打包成一个vendor,其他的库打包成另外一个vendor。按照webpack的文档开始配置,需要注意有两个比较坑的地方。

参考配置:

...
entry: { 
    "vendor1": ["react", "react-dom", "react-router", "react-router-redux", "react-redux", "redux"], 
    "vendor2": ["crypto-js", "fastclick"],
    "app": "./js/index.js" 
},
...
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        names: ["vendor2","vendor1"],
        minChunks: Infinity
    })
],
...
第一个要注意的地方,在CommonsChunkPlugin里面,vender的顺序要反着来,总之,要和加载顺序相反。比如你想按vendor1,vendor2的顺序加载,entry里面写的是vendor1,vendor2,在CommonsChunkPlugin里面要写vendor2,vendor1。
第二个要注意的地方,output.filename一定不要写死了,要配置成可替换的,类似filename: ‘[name].js’形式。
本站个别资源来源于网络,还请自行再次甄别本资源安全性及合法性! 本站提供的资源(包括但不限于源码,软件,文章)仅供个人为了学习和研究其内含的设计思想和原理,请在查阅后后自觉删除。
0
分享到:

评论0

请先

没有账号? 忘记密码?