UNPKG

2.27 kBMarkdownView Raw
1# mini-html-webpack-plugin - A miniature version of html-webpack-plugin with less functionality
2
3[![npm](https://img.shields.io/npm/v/mini-html-webpack-plugin.svg)](https://www.npmjs.com/package/mini-html-webpack-plugin) [![Build Status](https://travis-ci.org/styleguidist/mini-html-webpack-plugin.svg)](https://travis-ci.org/styleguidist/mini-html-webpack-plugin)
4
5The plugin writes CSS and JS asset paths for you automatically. You can also override most of it. It does **not** work with html-webpack-plugin plugins!
6
7## Usage
8
9```
10npm install mini-html-webpack-plugin
11```
12
13```javascript
14const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');
15
16const config = {
17 plugins: [
18 new MiniHtmlWebpackPlugin({
19 context: {
20 title: 'Webpack demo' // Available in the context below
21 },
22 filename: 'demo.html' // Optional, defaults to `index.html`
23 })
24 ]
25};
26```
27
28## How to Minify HTML?
29
30```javascript
31const minify = require('html-minifier').minify;
32const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');
33
34const config = {
35 plugins: [
36 new MiniHtmlWebpackPlugin({
37 context: {
38 title: 'Minification demo'
39 },
40 template: context =>
41 minify(MiniHtmlWebpackPlugin.defaultTemplate(context))
42 })
43 ]
44};
45```
46
47## Custom Templates
48
49Use [@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.
50
51Or define a template function to generate your own code:
52
53```js
54const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');
55const {
56 generateCSSReferences,
57 generateJSReferences
58} = MiniHtmlWebpackPlugin;
59
60const config = {
61 plugins: [
62 new MiniHtmlWebpackPlugin({
63 context: {
64 title: 'Custom template'
65 },
66 template: ({ css, js, title, publicPath }) =>
67 `<!DOCTYPE html>
68 <html>
69 <head>
70 <meta charset="UTF-8">
71 <title>${title}</title>
72 ${generateCSSReferences(css, publicPath)}
73 </head>
74 <body>
75 <div id="app"></div>
76 ${generateJSReferences(js, publicPath)}
77 </body>
78 </html>`
79 })
80 ]
81};
82```
83
84## License
85
86MIT.