webpack-inline-manifest-plugin
v4.0.1
Published
inline your Webpack manifest.js with a script tag to save http request
Downloads
20,708
Maintainers
almothafarReadme
Webpack Inline Manifest 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 webpack-inline-manifest-plugin -DBasic Usage
This plugin need to work with HtmlWebpackPlugin v2.10.0 and above:
Step1: split out the runtime code
// for explicit vendor chunk config
[
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
})
]
// or specify which chunk to split manually
[
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['...']
})
]Step2: config HtmlWebpackPlugin:
[
new HtmlWebpackPlugin({
template: './index.ejs'
})
]Step3: config WebpackInlineManifestPlugin
- name: default value is
webpackManifest, result inhtmlWebpackPlugin.files[name], you can specify any other name exceptmanifest, beacuse the namemanifesthaved been used by HtmlWebpackPlugin for H5 app cache manifest.
Call:
const WebpackInlineManifestPlugin = require('webpack-inline-manifest-plugin');Config:
[
new WebpackInlineManifestPlugin({
name: 'webpackManifest'
})
]Finally in HTML:
<!-- index.ejs -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>App</title>
</head>
<body>
<%=htmlWebpackPlugin.files.webpackManifest%>
</body>
</html>Done!