webpack的splitChunks的问题。

Question

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

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

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

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

Answer 1

新分离出来的chunk块，可以在html模板中指定所需要的chunk块，下图是我的配置

common/common.js 和 common/vendor.js 是新分离出来的chunk，

在每个html模板中指定特定的块

希望能帮到你！

Answer 2

可以将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