Webpack Inline Manifest Plugin

This is a webpack plugin that inline your manifest.js with a script tag to save http request. Cause webpack's runtime always change between every build, it's better to split the runtime code out for long-term caching.

Installation

Install the plugin with npm:

$ npm i webpack-inline-manifest-plugin -D

Basic Usage

This plugin need to work with webpack v4+ and HtmlWebpackPlugin v3:

For webpack v3 and below, please use version 4.0.0 or original library inline-manifest-webpack-plugin

Step1: split out the runtime code

// the default name is "runtime"
optimization: {
    runtimeChunk: 'single'
}

// or specify another name
optimization: {
    name: 'webpackManifest'
}

Step2: add and config HtmlWebpackPlugin:

[
    // https://github.com/jantimon/html-webpack-plugin
    new HtmlWebpackPlugin()
]

Step3: config WebpackInlineManifestPlugin, you need to add this right after HtmlWebpackPlugin

name: default value is webpackManifest, result in htmlWebpackPlugin.files[name], you can specify any other name except manifest, beacuse the name manifest haved been used by HtmlWebpackPlugin for H5 app cache manifest.

Call:

const WebpackInlineManifestPlugin = require('webpack-inline-manifest-plugin');

Config:

[
    new HtmlWebpackPlugin(),
    new WebpackInlineManifestPlugin({
        name: 'webpackManifest' // must be the same value of runtimeChunk's name
    })
]

Finally in HTML:

<!-- index.ejs -->
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>App</title>
    </head>
    <body>
    
    <%=htmlWebpackPlugin.files.webpackManifest%>
    
    </body>
</html>

Done! This will replace the external script with inline code.

almothafar/webpack-inline-manifest-plugin

Webpack Inline Manifest Plugin

Installation

Basic Usage