html-webpack-inline-chunk-plugin

Inline Chunk Webpack Plugin

This is a webpack plugin that inline your chunks that is written as links or script using HtmlWebpackPlugin. It can be use to inline manifest within script tag to save a http request as described in this example. It is not limited to manifest chunk but can inline any other chunk.

This plugin requires HtmlWebpackPlugin v2.10.0 and above.

Installation

Install the plugin with npm:

$ npm install html-webpack-inline-chunk-plugin --save-dev

Configuration

• inlineChunks: An array of names of chunk to inline.
• quiet: If set to true the plugin won't display any log information. (default value: false)

//webpack.config
const InlineChunkWebpackPlugin = require('html-webpack-inline-chunk-plugin');
module.exports = {
  //.....
  //.....
  plugins: [
    //...
    //...
    	new InlineChunkWebpackPlugin({
        inlineChunks: ['manifest']
    })
  //...
  ]
  //.....
  //.....
}

Example Usage

Webpack's runtime changes with every build. For effective long-term caching, we separate the runtime code in manifest.js. This manifest.js is very small and increases our startup time as it is a separate http request. Inlining the generated manifest.js in the index.html is a solution.

Split webpack runtime in manifest and inline it.

// for explicit vendor chunk config
{
  entry: {
    app: './main.js',
    vendors: ['react','redux']
  },
  output: {
    path: path.join(__dirname, "js"),
    filename: "[name].[chunkhash].js",
    chunkFilename: "[chunkhash].js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['common', 'manifest']
    }),
    new HtmlWebpackPlugin({
      // your options,
      excludeChunks: ['vendors']
    }),
    new InlineChunkWebpackPlugin({
        inlineChunks: ['manifest']
    })
  ]
}

License

This project is licensed under MIT.