HTML Webpack Plugin

Plugin that simplifies creation of nginx conf to push your webpack bundle files through HTTP/2

Installation

Using npm:

$ npm install --save nginx-push-webpack-plugin

Using yarn:

$ yarn add nginx-push-webpack-plugin

This is a webpack plugin that simplifies creation of nginx conf to push your webpack bundle files through HTTP/2.

HTTP/2 has released for a few years, it dramatically improves performances a lot. One noticeable feature is HTTP push which is able to push static resources such as javascript, style sheet and image during first request to server. Typically, the first request for SPA is index.html. Nginx support HTTP/2 server push in version 1.13.9 with new directive http2_push https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/.

However, the new directive prefers fixed file name such as style.css without hash. Hashing filenames in webpack is pretty important for long term caching. To enable http2_push in SPA application, it seems that we need to manually update our nginx conf for each build. That's why we introduce this plugin to create http2_push directive for each webpack build. There is no need to update main nginx conf each time, we only need to include nginx.push.conf. nginx.push.conf will be automatically updated.

Example

This plugin will automatically generated http2_push statement for each output initial chunk. Just add the plugin to your webpack as follows:

webpack.config.js

// webpack.config.js
const NginxPushWebpackPlugin = require('nginx-push-webpack-plugin')

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

This will generate a file dist/nginx.push.conf containing the following:

# Automatically generated by NginxPushWebpackPlugin, don't change it manually
# Please include this file in your nginx web server directive
# ```
#   include nginx.push.conf;
# ```

location = /index.html {
  http2_push /index_bundle.js;
}

Include the generated nginx.push.conf in main nginx.conf as below:

server {
    # listen on port 433 with https
    listen 443 ssl http2;

    server_name example.com;

    # ssl cert
    ssl_certificate /usr/share/cert/server/servercert.pem;
    ssl_certificate_key /usr/share/cert/server/serverkey.pem;

    # where the root here
    root /usr/share/app;

    # what file to server as index
    index index.html;

    # include nginx push conf to enable HTTP/2 server push
    include nginx.push.conf;
}

Contributing

Please feel free to submit any issues or pull requests.

License

MIT