多页面打包部分页面使用了第三方插件，分割代码之后怎么自动注入到使用了三方插件到页面去 ?

Question

问题是这样的，做多页面应用，某个页面需要引入第三方插件，将第三方插件单独分割出来，怎么根据第三方库的使用情况自动注入到对应到页面，

// 入口配置
module.exports = function(targetPath) {
  let entries = {}, pathname, tmp, tmp2;
  glob.sync(targetPath).forEach(function(entry) {
    tmp = entry.split('/').splice(-2)
    tmp2 = entry.substring(0, entry.lastIndexOf('/'))
    pathname = tmp[0]
    entries[pathname] = {
      entry: entry,
      template: `${tmp2}/index.html`,
      filename: `bk_${pathname}.html`,
      chunks: ['chunk-libs', pathname]
  })
  return entries
}

// vue.config.js
config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: { 
        libs: { 
          name: 'chunk-libs', 
          test: /[\\/]node_modules[\\/]/, 
          priority: 10, 
          chunks: 'initial'
        }, 
        elementUI: { 
          name: 'chunk-elementUI',
          priority: 20,
          test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
        },
        swiper: { 
          name: 'chunk-swiper',
          priority: 20,
          test: /[\\/]node_modules[\\/]_?swiper(.*)/,
        }
      } 
    })

chunk-elementUI和chunk-swiper不会自动注入到页面中去，这样该怎么处理呢？

Answer 1

这两天没找到合适的方法，自己写了个简单的插件，只做了针对性的，需要的可以参考试下，
插件地址