Staticpages-webpack-plugin NPM

Install

Using npm:

npm i --save-dev staticpages-webpack-plugin

Using yarn:

yarn add -D staticpages-webpack-plugin

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.

Zero Config

The staticpages-webpack-plugin works without configuration.

Usage

StaticPages will generate a static html file for each entry in src/pages that can then be served by your webserver.

webpack.config.js

const StaticPagesWebpackPlugin = require('staticpages-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path:     __dirname + '/dist',
    filename: 'app.js'
  },
  plugins: [
    new StaticPagesWebpackPlugin()
  ]
}

src/pages/index.jsx

export default (props) => (
  <h1>Hello World</h1>
);

Will generate dist/index.html with the following content

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
</head>
<body>
  <div id="app">
    <h1>Hello World</h1>
  </div>
  <script src="app.js"></script>
</body>
</html>