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

2021-02-20 07:20

阅读:750

标签:自己   dex   hub   lin   tps   when   runtime   ali   ports   

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

多页应用:

// webpack plugin config
    module.exports = {
        entry: {
            index: ‘./src/js/index.js‘,
            list: ‘./src/js/list.js‘
        },
        plugin: [
            new inlineHtmlEntryChunkPlugin(),
            new htmlWebpackPlugin({
                entry: ‘index‘
            }),
            new inlineHtmlEntryChunkPlugin(),
            new htmlWebpackPlugin({
                entry: ‘list‘
            })
        ]
    }

配置项:

Name Type Default Description
inject {Object} {css: ‘head‘, js: ‘body‘} control the assets of position in HTML
tag {Object} {} Add additional resource tags
tagPriority {Number} 0 Control the insertion order of entry chunk and other tags

 

示例:

module.exports = {
        plugin: [
            new htmlInlineEntryChunkPlugin({
                inject: {
                    js: ‘body‘,
                    css: ‘head‘
                },
                tagPriority: 1,
                tag: {
                    head: [
                        ‘https://cdn.bootcdn.net/ajax/libs/basscss/8.1.0/css/basscss-cp.css‘,
                        ‘https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js‘
                    ],
                    body: [
                        ‘https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.compat.css‘,
                        ‘https://cdn.bootcdn.net/ajax/libs/Chart.js/3.0.0-alpha/Chart.esm.js‘
                    ]
                }
            }),
            new htmlWebpackPlugin({
                entry: ‘index‘
            })
        ]
    }

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

标签:自己   dex   hub   lin   tps   when   runtime   ali   ports   

原文地址:https://www.cnblogs.com/pomelott/p/12919751.html


评论


亲,登录后才可以留言!