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.
Install the plugin with npm:
$ npm i webpack-inline-manifest-plugin -DThis plugin need to work with webpack v4+ and HtmlWebpackPlugin v3:
For webpack v3 and below, please use version 4.0.0 or original library inline-manifest-webpack-plugin
Step1: split out the runtime code
// the default name is "runtime"
optimization: {
runtimeChunk: 'single'
}
// or specify another name
optimization: {
name: 'webpackManifest'
}Step2: add and config HtmlWebpackPlugin:
[
// https://github.com/jantimon/html-webpack-plugin
new HtmlWebpackPlugin()
]Step3: config WebpackInlineManifestPlugin, you need to add this right after HtmlWebpackPlugin
- 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 HtmlWebpackPlugin(),
new WebpackInlineManifestPlugin({
name: 'webpackManifest' // must be the same value of runtimeChunk's name
})
]Finally in HTML:
<!-- index.ejs -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>App</title>
</head>
<body>
<%=htmlWebpackPlugin.files.webpackManifest%>
</body>
</html>Done! This will replace the external script with inline code.