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.

jaketrent / html-webpack-template

Failed to work with html-webpack-template #81

Description