最近在嘗試使用webpack4構建一個一般的多頁面多入口的應用。公用組件和第三方node_modules都是通過splitChunks來提取出來的。看結果也分離出來了。每個entry頁面的html文件是通過html-webpack-plugin指定的。問題來了，怎么動態將splitChunks分離出來的chunk js文件，自動添加到html中？有沒有現成的插件，還是說只能分離出文件來后，手動去添加？
1 回答
皈依舞
TA貢獻1851條經驗 獲得超3個贊
可以將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
- 1 回答
- 0 關注
- 645 瀏覽
添加回答
舉報
0/150
提交
取消