All Projects → szrenwei → Inline Manifest Webpack Plugin

szrenwei / Inline Manifest Webpack Plugin

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Inline Manifest Webpack Plugin

Runtimepermission
Simpliest way to ask runtime permissions on Android, no need to extend class or override permissionResult method, choose your way : Kotlin / Coroutines / RxJava / Java7 / Java8
Stars: ✭ 860 (+447.77%)
Mutual labels:  manifest, runtime
Crystdb
CrystDB is a thread-safe and convenient Object Relational Mapping database that based on SQLite.
Stars: ✭ 146 (-7.01%)
Mutual labels:  runtime
Nicelinks Vue Client
🐬 很棒的 Web 应用——倾城之链(NICE LINKS),基于 Vue2.*(Webpack、Es6、Element-ui)所构建
Stars: ✭ 133 (-15.29%)
Mutual labels:  webpack4
163music
🎵163 music web app built with Vue 2.6, server side render, webpack 4
Stars: ✭ 139 (-11.46%)
Mutual labels:  webpack4
React Redux Bootstrap Webpack Starter
React 16.9 + Typescript + React-Router 4 + Redux + Bootstrap 4 + Hot Reload + redux-devtools-extension + Webpack 4 + styled-components STARTER
Stars: ✭ 133 (-15.29%)
Mutual labels:  webpack4
Swizzleswift
Swizzle selectors with just one clean and elegant API
Stars: ✭ 140 (-10.83%)
Mutual labels:  runtime
Webpack Demo
A simple demo to use React with webpack
Stars: ✭ 130 (-17.2%)
Mutual labels:  webpack4
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+1067.52%)
Mutual labels:  webpack4
Rapidgui
Unity OnGUI(IMGUI) extensions for Rapid prototyping/development
Stars: ✭ 144 (-8.28%)
Mutual labels:  runtime
Next Runtime Dotenv
Expose environment variables to the runtime config of Next.js
Stars: ✭ 136 (-13.38%)
Mutual labels:  runtime
Pwafire
Progressive Web Apps API of APIs
Stars: ✭ 137 (-12.74%)
Mutual labels:  manifest
Webpack Internal Plugin Relation
🔎 a tiny tool to show the relation of webpack internal plugins & hooks
Stars: ✭ 135 (-14.01%)
Mutual labels:  webpack4
Vue 2 Webpack 4 Boilerplate
Ready to use Vue 2+ project with webpack 4 configuration for development and production
Stars: ✭ 142 (-9.55%)
Mutual labels:  webpack4
Debugengine
Delphi debug framework
Stars: ✭ 133 (-15.29%)
Mutual labels:  runtime
Webpack Babel Multi Target Plugin
A Webpack plugin that works with Babel to allow differential loading - production deployment of ES2015 builds targeted to modern browsers, with an ES5 fallback for legacy browsers.
Stars: ✭ 150 (-4.46%)
Mutual labels:  webpack4
Webpack Demo
webpack 4 config. demo ⚙️
Stars: ✭ 131 (-16.56%)
Mutual labels:  webpack4
Vue Element Quick Start
Vue2, Vuex 3, Vue Router 3, Element-ui and Typescript SPA project quick start kit(Vue element ui 快速开始脚手架)
Stars: ✭ 135 (-14.01%)
Mutual labels:  webpack4
Nconcern
NConcern .NET AOP Framework
Stars: ✭ 139 (-11.46%)
Mutual labels:  runtime
React Webpack4 Cook
💯The most powerful webpack4 tutorial in the universe
Stars: ✭ 152 (-3.18%)
Mutual labels:  webpack4
Vue Webpack Config
Koa2、Webpack、Vue、React、Node
Stars: ✭ 151 (-3.82%)
Mutual labels:  webpack4

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>
<% } %>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].