webpack的splitChunks的问题。

Question

最近在尝试使用webpack4构建一个一般的多页面多入口的应用。

公用组件和第三方node_modules都是通过splitChunks来提取出来的。看结果也分离出来了。

每个entry页面的html文件是通过html-webpack-plugin指定的。

问题来了，怎么动态将splitChunks分离出来的chunk js文件，自动添加到html中？有没有现成的插件，还是说只能分离出文件来后，手动去添加？

Answer 1

可以将entry配置与htmlwebpackplugins配置通过遍历的方式抽离出来.可以参考webpack-mutipage-tempalte这是入口配置部分// 多页面配置const glob = require('glob')const HtmlWebpackPlugin = require('html-webpack-plugin')const { resolve } = require('./utils')const entries = glob.sync(resolve('src/page/**/*.js'))const entriesOpt = {}const pluginsOpt = []const faviconPath = resolve('src/image/favicon/favicon.png') entries.forEach(item => {  const chunkName = item.match(/src\/page\/(.+)\.js/)[1]  const templatePath = item.replace(/.js$/, '.html')  let fileName = templatePath.match(/src\/(page\/.+\.html$)/)[1]   entriesOpt[chunkName] = item   pluginsOpt.push(    new HtmlWebpackPlugin({      favicon: faviconPath,      filename: fileName,      template: templatePath,      chunks: ['vendor', 'manifest', 'common-styles', chunkName],      minify: {        removeComments: true,        collapseWhitespace: true,        removeAttributeQuotes: true       }     })   ) })const config = {  entry: entriesOpt,  plugins: pluginsOpt }module.exports = config