最近在嘗試使用webpack4構(gòu)建一個(gè)一般的多頁(yè)面多入口的應(yīng)用。公用組件和第三方node_modules都是通過(guò)splitChunks來(lái)提取出來(lái)的?？唇Y(jié)果也分離出來(lái)了。每個(gè)entry頁(yè)面的html文件是通過(guò)html-webpack-plugin指定的。問(wèn)題來(lái)了，怎么動(dòng)態(tài)將splitChunks分離出來(lái)的chunk js文件，自動(dòng)添加到html中？有沒(méi)有現(xiàn)成的插件，還是說(shuō)只能分離出文件來(lái)后，手動(dòng)去添加？
1 回答
皈依舞
TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超3個(gè)贊
可以將entry配置與htmlwebpackplugins配置通過(guò)遍歷的方式抽離出來(lái).
可以參考webpack-mutipage-tempalte
這是入口配置部分// 多頁(yè)面配置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 關(guān)注
- 642 瀏覽
添加回答
舉報(bào)
0/150
提交
取消