pug-inline-css-webpack-plugin
v1.0.0
Published
## Explaination this plugin has to be used after HtmlWebpackPlugin,it will inline critical css to speed up page loading
Downloads
6
Readme
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")