Inline Chunks Webpack Plugin

webpack v4 support

This is a webpack plugin that inline your chunks that is written as link or script using HtmlWebpackPlugin.

It both can be use to inline manifest & css within link or script tag to save a http request.

It also can inline any other chunks.

This plugin requires HtmlWebpackPlugin v2.10.0 and above.

Installation

Install the plugin with npm:

1npm install inline-chunks-html-webpack-plugin --save-dev

Configuration

• inlineChunks: An array of names of chunk to inline.
  • chunk[.ext]: .ext is optional to distinguish chunk of the same name from the file extension.
• deleteFile: delete file from asset default to false.

1//webpack.config
2const InlineChunksWebpackPlugin = require('inline-chunks-html-webpack-plugin');
3module.exports = {
4    //.....
5    //.....
6    plugins: [
7      //...
8      //...
9      new InlineChunksWebpackPlugin({
10        inlineChunks: ['manifest'],
11        deleteFile: true // do not build chunks
12      })
13    //...
14    ]
15    //.....
16    //.....
17}

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.

Extract css bundle and split webpack runtime to manifest then inline it.

1// for explicit vendor chunk config
2{
3  entry: {
4    app: './main.js',
5    vendor: ['react','redux']
6  },
7  output: {
8    path: path.join(__dirname, "js"),
9    filename: "[name].[chunkhash].js",
10    chunkFilename: "[chunkhash].js"
11  },
12  plugins: [
13    new webpack.optimize.CommonsChunkPlugin({
14      name: 'vendor'
15    }),
16    new webpack.optimize.CommonsChunkPlugin({
17      name: 'manifest',
18      chunks: ['vendor']
19    }),
20    // extract css into its own file
21    new ExtractTextPlugin('[name].[contenthash].css'),
22    new HtmlWebpackPlugin({
23      // your options
24    }),
25    new InlineChunksWebpackPlugin({
26      // inlined app.css to the head and manifest.js to the body
27      inlineChunks: ['manifest', 'app.css'],
28      deleteFile: true
29	})
30  ]
31}

License

This project is licensed under MIT.