pug-inline-css-webpack-plugin

Explaination

this plugin has to be used after HtmlWebpackPlugin，it will inline critical css to speed up page loading

Installation

npm i --save-dev pug-inline-css-webpack-plugin
yarn add --dev pug-inline-css-webpack-plugin

usage

// webpack.config.js
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: 'a.pug',
            filename: 'A.pug',
            chunks: ['common', 'app'],
            minify: {
                removeComments: true,
                collapseWhitespace: true
            },
            inject: true
        })
        new PugInlineCSSWebpackPlugin({
            tagIndent: 4,
            contentIndent: 8,
            ignoreChunks: ['common']
        })
    ]
}

then you can see app.css being inlined into A.pug:

• before inlined

doctype html
html
    head
        title= title
        meta(charset="utf-8")
        meta(name="renderer" content="webkit|ie-comp|ie-stand")
        meta(http-equiv="X-UA-Compatible" content="IE=edge; chrome=1")
        meta(name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0")
        link(href="/mobile/app.ca3cd27e24196fda3ae4.css" rel="stylesheet")
    body
        #root
        script(src="/mobile/manifest.9ee719cabd4b3db2c54c.js")
        script(src="/mobile/common.0f65beeaa310db8314d0.js")
        script(src="/mobile/app.e6f715dee49e057b87c1.js")

• after inlined

doctype html
html
    style(type="text/css").
        .app {
            font-size: 15px;
        }
    head
        title= title
        meta(charset="utf-8")
        meta(name="renderer" content="webkit|ie-comp|ie-stand")
        meta(http-equiv="X-UA-Compatible" content="IE=edge; chrome=1")
        meta(name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0")
 
    body
        #root
        script(src="/mobile/manifest.9ee719cabd4b3db2c54c.js")
        script(src="/mobile/common.0f65beeaa310db8314d0.js")
        script(src="/mobile/app.e6f715dee49e057b87c1.js")