打包第三方控件;比如jquery,angular,bootstrap。。。。
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); const PATHS = { app: path.join(__dirname, 'src'), build: path.join(__dirname, 'build'), }; module.exports ={ entry: { app: PATHS.app, vendor: ['react', 'react-dom', 'react-router', 'classnames'] }, output: { path: PATHS.build, filename: "[name].[chunkHash:8].js", publicPath: '', chunkFilename: "[name].[chunkHash:8].js", }, plugins: [ new CommonsChunkPlugin({ names: ['vendor', 'manifest']//manifest:抽取变动部分,防止第三方控件的多次打包
})
]
}
总结:
1,vendor则是通过提取公共模块插件来提取的代码块(webpack本身带的模块化代码部分),而manifest则是在vendor的基础上,再抽取出要经常变动的部分,比如关于异步加载js模块部分的内容。
2,我们可以加上hash来查看,在未变动的情况下,是否又重新打包;
3,第三方控件只用打包一次就可以了。