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 |
|
5 | The 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
|
12 | npm install mini-html-webpack-plugin
|
13 | ```
|
14 |
|
15 | ```javascript
|
16 | const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
|
17 |
|
18 | const 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 |
|
55 | 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.
|
56 |
|
57 | 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.
|
58 |
|
59 | ```javascript
|
60 | const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
|
61 |
|
62 | const 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
|
83 | const minify = require('html-minifier').minify;
|
84 | const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
|
85 |
|
86 | const 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 |
|
101 | 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.
|
102 |
|
103 | Or define a template function to generate your own code.
|
104 |
|
105 | The template function may return a string or a `Promise` resolving to a string.
|
106 |
|
107 | ```js
|
108 | const {
|
109 | MiniHtmlWebpackPlugin,
|
110 | generateAttributes,
|
111 | generateCSSReferences,
|
112 | generateJSReferences
|
113 | } = require('mini-html-webpack-plugin');
|
114 |
|
115 | const 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 |
|
176 | MIT.
|