imw

inline-manifest-webpack-plugin

inline your webpack manifest (runtime code) with a script tag to save http request

Showing:

Popularity

Downloads/wk

8.5K

GitHub Stars

157

Maintenance

Last Commit

3yrs ago

Contributors

4

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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.

Installation

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()
]

or

[
    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>
<% } %>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial