Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/styleguidist/mini-html-webpack-plugin
A miniature version of html-webpack-plugin with only necessary features
https://github.com/styleguidist/mini-html-webpack-plugin
Last synced: 5 days ago
JSON representation
A miniature version of html-webpack-plugin with only necessary features
- Host: GitHub
- URL: https://github.com/styleguidist/mini-html-webpack-plugin
- Owner: styleguidist
- License: mit
- Created: 2018-03-10T15:52:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T19:49:12.000Z (about 1 year ago)
- Last Synced: 2024-10-30T00:00:49.599Z (13 days ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/mini-html-webpack-plugin
- Size: 1.58 MB
- Stars: 57
- Watchers: 3
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: Contributing.md
- License: License.md
Awesome Lists containing this project
README
# mini-html-webpack-plugin: a miniature version of html-webpack-plugin with only necessary features
[](https://www.npmjs.com/package/mini-html-webpack-plugin) [](https://travis-ci.org/styleguidist/mini-html-webpack-plugin)
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
```sh
npm install mini-html-webpack-plugin
```
```javascript
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
const config = {
plugins: [
new MiniHtmlWebpackPlugin({
// Optional, defaults to `index.html`
filename: 'demo.html',
// Optional
publicPath: 'demo/',
context: {
title: 'Webpack demo',
// Optional, defaults to `{ lang: 'en' }`
htmlAttributes: {
lang: 'en'
},
// Optional, any additional HTML attached within
head: '',
// Optional, any additional HTML attached within
body: '',
// Optional
cssAttributes: {
rel: 'preload',
as: 'style'
},
// Optional
jsAttributes: {
defer: true
}
},
// Optional, use this for choosing chunks to include to your page.
// See the expanded example below.
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.
```javascript
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
```javascript
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](https://www.npmjs.com/package/@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.
```js
const {
MiniHtmlWebpackPlugin,
generateAttributes,
generateCSSReferences,
generateJSReferences
} = require('mini-html-webpack-plugin');
const config = {
plugins: [
new MiniHtmlWebpackPlugin({
filename: 'demo.html',
publicPath: 'demo/',
// `context` is available in `template` below
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 `
${title}
${cssTags}
${jsTags}
`;
}
})
]
};
```
## License
MIT.