webpack的多文件打包问题

Posted 2020-09-18

1.第三方库如vue，vue-router可以利用webpack中的entry指定vendor:[‘vue‘,‘vue-router‘]来打包在一个文件中

2.将这些文件单独提取出来，在页面中使用<script></script>进行引入，commonChunkPlugin可以办到。利用commonChunkPlugin来配置多个<script></script>

引用时，可以如下配置：

new webpack.optimize.CommonChunkPlugin{

  names :［＇vendor＇,‘ component ‘］

}

3.对于其他页面，为了引用这些打包出来的公共组件，可以利用htmlWebpackPlugin来指定，如：

new HtmlWebpackPlugin({

  chunks:[ ‘vendor‘,‘components‘]

})

4.对于路由中的组件，我们一般都需要按需加载，使用require时会自动打包成chunk文件，在webpack.config.js进行配置

output:{

 ‘chunkFilename‘ : ‘[name].[hash].js‘

}