Here is the plugin mentioned in the offcial webpack guide.
This plugin aims to create index.html for PWAs, with good default template built-in, and let you customize with simple configuration.
You can also provide your own templates in the same way you compose apps - JSX and React components.
Install the plugin with npm:
$ npm i -D html-plugin vhtml
Add the plugin to webpack config:
+ const HtmlPlugin = require('html-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
+ plugins: [
+ new HtmlPlugin({
+ title: 'My App'
+ })
+ ]
}This will generate dist/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My App</title>
<meta charset="utf-8" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="/manifest.json" />
<link rel="shortcut icon" href="/favicon.png" />
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>- filename
- title / name
- lang
- themeColor
- manifest
- favicon