Description
I am naming the runtimeChunk as manifest, and using the InlineManifestWebpackPlugin with the string option of the same name: manifest. The webpack config is setup like the following:
optimization: {
runtimeChunk: {
name: 'manifest'
}
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(htmlTemplate),
new InlineManifestWebpackPlugin('manifest'),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
And the html-webpack template has the inlineManifestWebpackName: 'manifest', defined like the following:
module.exports = {
// Required
inject: false,
template: require('html-webpack-template'),
// template: 'node_modules/html-webpack-template/index.ejs',
// Optional
appMountId: 'root-entry',
bodyHtmlSnippet: '<custom-element></custom-element>',
meta: [
{
name: 'my App',
content: 'Something descriptive'
}
],
mobile: true,
lang: 'en-US',
inlineManifestWebpackName: 'manifest',
title: 'my App'
// And any other config options from html-webpack-plugin:
// https://github.com/ampedandwired/html-webpack-plugin#configuration
};
The final HTML file looks like when inject: false:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta name="my App" content="Something descriptive">
<title>my App</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>
<custom-element></custom-element>
<div id="root-entry">
</div>
<script src="/build/vendors.0f14.js" type="text/javascript"></script>
<script src="/build/app.b7d1.js" type="text/javascript"></script>
</body>
</html>
with inject: true
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta name="my App" content="Something descriptive">
<title>my App</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="my App" content="Something descriptive"></head>
<body>
<custom-element></custom-element>
<div id="root-entry">
</div>
<script src="/build/manifest.2902.js" type="text/javascript"></script>
<script src="/build/vendors.0f14.js" type="text/javascript"></script>
<script src="/build/app.b7d1.js" type="text/javascript"></script>
<script type="text/javascript">RUNTIME IS INJECTED HERE</script>
<script type="text/javascript" src="/build/vendors.0f14.js"></script>
<script type="text/javascript" src="/build/app.b7d1.js"></script>
</body>
</html>
It's not really clear why inject: false is not working. And in the inject: true I get duplicate files.
Description
I am naming the runtimeChunk as
manifest, and using theInlineManifestWebpackPluginwith the string option of the same name:manifest. The webpack config is setup like the following:And the html-webpack template has the
inlineManifestWebpackName: 'manifest',defined like the following:The final HTML file looks like when
inject: false:with
inject: trueIt's not really clear why
inject: falseis not working. And in theinject: trueI get duplicate files.