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 |
|
5 | The 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 | ```
|
10 | npm install mini-html-webpack-plugin
|
11 | ```
|
12 |
|
13 | ```javascript
|
14 | const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');
|
15 |
|
16 | const 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
|
31 | const minify = require('html-minifier').minify;
|
32 | const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');
|
33 |
|
34 | const 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 |
|
49 | 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.
|
50 |
|
51 | Or define a template function to generate your own code:
|
52 |
|
53 | ```js
|
54 | const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');
|
55 | const {
|
56 | generateCSSReferences,
|
57 | generateJSReferences
|
58 | } = MiniHtmlWebpackPlugin;
|
59 |
|
60 | const 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 |
|
86 | MIT.
|