UNPKG

4.47 kBMarkdownView Raw
1# mini-html-webpack-plugin: a miniature version of html-webpack-plugin with only necessary features
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. It works with webpack 4 or higher.
6
7**It does not work with html-webpack-plugin plugins!**
8
9## Usage
10
11```sh
12npm install mini-html-webpack-plugin
13```
14
15```javascript
16const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
17
18const config = {
19 plugins: [
20 new MiniHtmlWebpackPlugin({
21 // Optional, defaults to `index.html`
22 filename: 'demo.html',
23 // Optional
24 publicPath: 'demo/',
25 context: {
26 title: 'Webpack demo',
27 // Optional, defaults to `{ lang: 'en' }`
28 htmlAttributes: {
29 lang: 'en'
30 },
31 // Optional, any additional HTML attached within <head>
32 head: '',
33 // Optional, any additional HTML attached within <body>
34 body: '',
35 // Optional
36 cssAttributes: {
37 rel: 'preload',
38 as: 'style'
39 },
40 // Optional
41 jsAttributes: {
42 defer: true
43 }
44 },
45 // Optional, use this for choosing chunks to include to your page.
46 // See the expanded example below.
47 chunks: ['app']
48 })
49 ]
50};
51```
52
53### Multiple pages
54
55It'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.
56
57To 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.
58
59```javascript
60const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
61
62const config = {
63 entry: {
64 app: './app.js',
65 another: './another.js'
66 },
67 plugins: [
68 new MiniHtmlWebpackPlugin({
69 filename: 'index.html',
70 chunks: ['app'],
71 }),
72 new MiniHtmlWebpackPlugin({
73 filename: 'another.html',
74 chunks: ['another'],
75 },
76 ],
77};
78```
79
80### HTML minification
81
82```javascript
83const minify = require('html-minifier').minify;
84const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
85
86const config = {
87 plugins: [
88 new MiniHtmlWebpackPlugin({
89 context: {
90 title: 'Minification demo'
91 },
92 template: (context) =>
93 minify(MiniHtmlWebpackPlugin.defaultTemplate(context))
94 })
95 ]
96};
97```
98
99### Custom templates
100
101Use [@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.
102
103Or define a template function to generate your own code.
104
105The template function may return a string or a `Promise` resolving to a string.
106
107```js
108const {
109 MiniHtmlWebpackPlugin,
110 generateAttributes,
111 generateCSSReferences,
112 generateJSReferences
113} = require('mini-html-webpack-plugin');
114
115const config = {
116 plugins: [
117 new MiniHtmlWebpackPlugin({
118 filename: 'demo.html',
119 publicPath: 'demo/',
120 // `context` is available in `template` below
121 context: {
122 title: 'Webpack demo',
123 htmlAttributes: {
124 lang: 'en'
125 },
126 cssAttributes: {
127 rel: 'preload',
128 as: 'style'
129 },
130 jsAttributes: {
131 defer: true
132 }
133 },
134 template: ({
135 css,
136 js,
137 publicPath,
138 title,
139 htmlAttributes,
140 cssAttributes,
141 jsAttributes
142 }) => {
143 const htmlAttrs = generateAttributes(htmlAttributes);
144
145 const cssTags = generateCSSReferences({
146 files: css,
147 attributes: cssAttributes,
148 publicPath
149 });
150
151 const jsTags = generateJSReferences({
152 files: js,
153 attributes: jsAttributes,
154 publicPath
155 });
156
157 return `<!DOCTYPE html>
158 <html${htmlAttrs}>
159 <head>
160 <meta charset="UTF-8">
161 <title>${title}</title>
162 ${cssTags}
163 </head>
164 <body>
165 ${jsTags}
166 </body>
167 </html>`;
168 }
169 })
170 ]
171};
172```
173
174## License
175
176MIT.