webpack4多页应用HTML按需添加入口依赖chunk【html-webpack-plugin & html-inline-entry-chunk-plugin】

在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 }) ] }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxwdj.html