为了账号安全,请及时绑定邮箱和手机立即绑定

webpack的splitChunks的问题。

webpack的splitChunks的问题。

12345678_0001 2018-09-24 20:36:18
最近在尝试使用webpack4构建一个一般的多页面多入口的应用。公用组件和第三方node_modules都是通过splitChunks来提取出来的。看结果也分离出来了。每个entry页面的html文件是通过html-webpack-plugin指定的。问题来了,怎么动态将splitChunks分离出来的chunk js文件,自动添加到html中?有没有现成的插件,还是说只能分离出文件来后,手动去添加?
查看完整描述

1 回答

?
一只萌萌小番薯

TA贡献1795条经验 获得超7个赞

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


查看完整回答
反对 回复 2018-09-24
  • 1 回答
  • 0 关注
  • 1645 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信