jouni-kantola / Inline Chunk Manifest Html Webpack Plugin
Licence: mit
Extension plugin for html-webpack-plugin to inline webpack's chunk manifest. Default inlines in head tag.
Stars: ✭ 83
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Inline Chunk Manifest Html Webpack Plugin
Webapp Webpack Plugin
[DEPRECATED] use favicons-webpack-plugin instead
Stars: ✭ 127 (+53.01%)
Mutual labels: webpack, manifest
React Dynamic Route Loading Es6
Auto chunking and dynamic loading of routes with React Router and Webpack 2
Stars: ✭ 297 (+257.83%)
Mutual labels: webpack, chunk
Html Res Webpack Plugin
plugin for generating html in webpack
Stars: ✭ 170 (+104.82%)
Mutual labels: webpack, chunk
Webpack Pwa Manifest
Progressive Web App Manifest Generator for Webpack, with auto icon resizing and fingerprinting support.
Stars: ✭ 447 (+438.55%)
Mutual labels: webpack, manifest
Webpack Assets Manifest
This Webpack plugin will generate a JSON file that matches the original filename with the hashed version.
Stars: ✭ 269 (+224.1%)
Mutual labels: webpack, manifest
Webpack Hashed Chunkids
a plugin to help webpack to generate unique chunk id based on unique module id
Stars: ✭ 15 (-81.93%)
Mutual labels: webpack, chunk
Spa Starter Kit
📦 Quick starter kit for booting up a NodeJS container with React, webpack, babel/ES2015, Redux, and more.
Stars: ✭ 81 (-2.41%)
Mutual labels: webpack
Aspnetcoredemoapp
ASP.NET Core demo app with webpack bundle
Stars: ✭ 78 (-6.02%)
Mutual labels: webpack
Google Fonts Plugin
Webpack plugin that downloads fonts from Google Fonts and encodes them to base64
Stars: ✭ 83 (+0%)
Mutual labels: webpack
Multi Page App With React
🔧 A lightweight, flexible webpack setup with React for multi page application development
Stars: ✭ 82 (-1.2%)
Mutual labels: webpack
Micro Frontends Practice
基于qiankun的微前端实践，提供更为简单、完整的项目。react/vue demo已完成
Stars: ✭ 83 (+0%)
Mutual labels: webpack
Inline Chunk Manifest HTML Webpack Plugin
Extension plugin for html-webpack-plugin to inline webpack's chunk manifest. Defaults to inline in <head> tag.
Example output
Script tag to assign global webpack manifest variable, injected in <head>.
<head>
<script>window.webpackManifest={"0":"0.bcca8d49c0f671a4afb6.dev.js","1":"1.6617d1b992b44b0996dc.dev.js"}</script>
</head>
Usage
Install via npm/yarn
npm install inline-chunk-manifest-html-webpack-plugin --save-devyarn add inline-chunk-manifest-html-webpack-plugin --dev
webpack.config.js
const InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin');
module.exports = {
// your config values here
plugins: [
new HtmlWebpackPlugin({
template: './index-template.ejs'
}),
// InlineChunkManifestHtmlWebpackPlugin defaults to:
// { filename: 'manifest.json', manifestVariable: 'webpackManifest', chunkManifestVariable: 'webpackChunkManifest', dropAsset: false }
new InlineChunkManifestHtmlWebpackPlugin()
]
};
Config
const inlineChunkManifestConfig = {
filename: 'manifest.json', // manifest.json is default
manifestVariable: 'webpackManifest', // webpackManifest is default
chunkManifestVariable: 'webpackChunkManifest', // webpackChunkManifest is default; use in html-webpack-plugin template
dropAsset: true, // false is default; use to skip output of the chunk manifest asset (removes manifest.json)
manifestPlugins: [/* override default chunk manifest plugin(s) */],
extractManifest: false // true is default. When set to false, manifestPlugins (incl default) is not applied
};
new InlineChunkManifestHtmlWebpackPlugin(inlineChunkManifestConfig)
Explicit inject
When option inject: false is passed to html-webpack-plugin the content of the chunk manifest can be inlined matching the config option chunkManifestVariable.
Example template for html-webpack-plugin:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h1>My web site</h1>
<%=htmlWebpackPlugin.files.webpackChunkManifest%>
</body>
</html>
Override default chunk manifest plugin
To use plugins like webpack-manifest-plugin you can override the default plugin used to extract the webpack chunk manifest. To do this, you can do either of below configs:
inline-chunk-manifest-html-webpack-plugin apply dependency plugins:
const InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin');
module.exports = {
/* webpack config */
plugins: [
/* more plugins goes here */
new InlineChunkManifestHtmlWebpackPlugin({
manifestPlugins: [
new WebpackManifestPlugin()
],
manifestVariable: "manifest"
}),
new HtmlWebpackPlugin({
template: './index-template.ejs'
})
/* more plugins goes here */
]
};
Plugins applied separately:
const InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin');
module.exports = {
/* webpack config */
plugins: [
/* more plugins goes here */
new WebpackManifestPlugin(),
new InlineChunkManifestHtmlWebpackPlugin({
manifestVariable: "manifest",
extractManifest: false
}),
new HtmlWebpackPlugin({
template: './index-template.ejs'
})
/* more plugins goes here */
]
};
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].