mini-html-webpack-plugin: a miniature version of html-webpack-plugin with only necessary features
The plugin writes CSS and JS asset paths for you automatically. It works with webpack 4 or higher.
It does not work with html-webpack-plugin plugins!
Usage
npm install mini-html-webpack-plugin
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
const config = {
plugins: [
new MiniHtmlWebpackPlugin({
filename: 'demo.html',
publicPath: 'demo/',
context: {
title: 'Webpack demo',
htmlAttributes: {
lang: 'en'
},
head: '',
body: '',
cssAttributes: {
rel: 'preload',
as: 'style'
},
jsAttributes: {
defer: true
}
},
chunks: ['app']
})
]
};
Multiple pages
It's possible to use MiniHtmlWebpackPlugin
to develop sites with multiple pages. It can be combined with webpack's bundle splitting so you can share common code across different pages.
To achieve this, you'll have to define entry
against each the code for each page and define MiniHtmlWebpackPlugin
to match them. In practice you might want to abstract this pairing but to give you the full idea, consider the example below.
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
const config = {
entry: {
app: './app.js',
another: './another.js'
},
plugins: [
new MiniHtmlWebpackPlugin({
filename: 'index.html',
chunks: ['app'],
}),
new MiniHtmlWebpackPlugin({
filename: 'another.html',
chunks: ['another'],
},
],
};
HTML minification
const minify = require('html-minifier').minify;
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
const config = {
plugins: [
new MiniHtmlWebpackPlugin({
context: {
title: 'Minification demo'
},
template: (context) =>
minify(MiniHtmlWebpackPlugin.defaultTemplate(context))
})
]
};
Custom templates
Use @vxna/mini-html-webpack-template to add an app container div, a favicon, meta tags, inline JavaScript or CSS.
Or define a template function to generate your own code.
The template function may return a string or a Promise
resolving to a string.
const {
MiniHtmlWebpackPlugin,
generateAttributes,
generateCSSReferences,
generateJSReferences
} = require('mini-html-webpack-plugin');
const config = {
plugins: [
new MiniHtmlWebpackPlugin({
filename: 'demo.html',
publicPath: 'demo/',
context: {
title: 'Webpack demo',
htmlAttributes: {
lang: 'en'
},
cssAttributes: {
rel: 'preload',
as: 'style'
},
jsAttributes: {
defer: true
}
},
template: ({
css,
js,
publicPath,
title,
htmlAttributes,
cssAttributes,
jsAttributes
}) => {
const htmlAttrs = generateAttributes(htmlAttributes);
const cssTags = generateCSSReferences({
files: css,
attributes: cssAttributes,
publicPath
});
const jsTags = generateJSReferences({
files: js,
attributes: jsAttributes,
publicPath
});
return `<!DOCTYPE html>
<html${htmlAttrs}>
<head>
<meta charset="UTF-8">
<title>${title}</title>
${cssTags}
</head>
<body>
${jsTags}
</body>
</html>`;
}
})
]
};
License
MIT.