Skip to content
inline your webpack manifest (runtime code) with a script tag to save http request
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig add eslint May 24, 2016
.eslintrc add eslint May 24, 2016
.gitignore support for webpack4 May 7, 2018
.npmignore support for webpack4 May 7, 2018
LICENSE init May 19, 2016
circle.yml modify circleci config May 24, 2016
index.js support manual mode for HtmlWebpackPlugin Sep 9, 2018
package.json 4.0.2 Sep 9, 2018

CircleCI js-standard-style npm npm npm

Inline Manifest Webpack 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.


Install the plugin with npm:

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

Basic Usage

This plugin need to work with webpack v4 (for webpack v3 and below, pls use version 3) and HtmlWebpackPlugin v3 :

Step1: split out the runtime code

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

// or specify another name
optimization: {
    runtimeChunk: {
        name: 'another name'

Step2: add plugins:

// this plugin need to put after HtmlWebpackPlugin
    new HtmlWebpackPlugin(),
    new InlineManifestWebpackPlugin()


    new HtmlWebpackPlugin(),
    // if you changed the runtimeChunk's name, you need to sync it here
    new InlineManifestWebpackPlugin('another name')

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

One more thing

if you use inject: false in your HtmlWebpackPlugin, you can access the runtime code like this:

<%= htmlWebpackPlugin.files.runtime %>

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
You can’t perform that action at this time.