在webpack4中使用splitChunkPlugin时,根据需要将公共代码拆分为多个依赖后,需要在创建htmlWebpackPlugin时候按需引入对应入口文件依赖的chunk。但是html-webpack-plugin的chunk配置项只能手动添加,在没有得知拆分后的chunk情况下,无法得知对应html的依赖chunk,也就无法按需做引入。
因此鄙人自己写了个配合html-webpack-plugin的插件,使用方便,效果还行,如果有帮到你,希望能在github上赐我一颗小星星。
github地址:https://github.com/pomelott/html-inline-entry-chunk-plugin
html-inline-entry-chunk-plugin使用教程如下:
单页应用:
// webpack plugin config module.exports = { entry: { index: './src/js/index.js' }, plugin: [ new inlineHtmlEntryChunkPlugin(), // when useing inlineHtmlEntryChunkPlugin, the chunk param in htmlWebpackPlugin is invalid new htmlWebpackPlugin({ entry: 'index', chunk: ['runtime'] //chunk is invalid }) ] }