1. inline-manifest-webpack-plugin
inline your Webpack manifest.js with a script tag to save http request
inline-manifest-webpack-plugin
Package: inline-manifest-webpack-plugin
Created by: szrenwei
Last modified: Sun, 19 Jun 2022 01:22:17 GMT
Version: 4.0.2
License: MIT
Downloads: 15,975
Repository: https://github.com/szrenwei/inline-manifest-webpack-plugin

Install

npm install inline-manifest-webpack-plugin
yarn add inline-manifest-webpack-plugin

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.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code