title: Purpose of Webpack-Manifest-Plugin in Webpack
body: <p>In official doc says when applying <code>Code Splitting</code> and generating <code>chunk</code> files, if <code>chunk</code> code changes, then the filename of it will change. However <code>index.html</code> which uses the <code>chunk</code> code files can't change the filename in its <code>&lt;script&gt;</code> tag, so in this case the <code>manifest.json</code> which is generated by <code>webpack-manifest-plugin</code> will help mapping <strong><code>[name].js</code> to <code>[name].[hash].js</code></strong>.</p>
  
  <p>But opposing to what the doc says, it seems that every time I run webpack to build my codes, new codes are generated with new hash value in its file(in case something in code changed), and <code>HTML-Webpack-Plugin</code> will autometically inject <code>&lt;script&gt;</code> tag with new name of code's file. This seems that there is no need to use <code>webpack-manifest-plugin</code>, I don't even see where the <code>manifest.json</code> is used.</p>
  
  <p>In case if you are looking for my <code>webpack.config.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>const path = require('path')
  const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  const HTMLWebpackPlugin = require('html-webpack-plugin')
  const ManifestPlugin = require('webpack-manifest-plugin')
  
  module.exports = {
    entry: ["core-js/stable", "regenerator-runtime/runtime", "./src/index.jsx"],
    output: {
      filename: '[name].[chunkhash].js',
      path: path.resolve(`${__dirname}/build`)
    },
    mode: "none",
    optimization: {
      runtimeChunk: 'single',
  
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: "/node_modules",
          use: ['babel-loader']
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HTMLWebpackPlugin({
        template: './public/index.html'
      }),
      new ManifestPlugin({
        fileName: 'manifest.json'
      })
      // need this plugin for SSR?
    ]
  }
  </code></pre>
  
  <p>What is the detailed usage of <code>webpack-manifest-plugin</code> and <code>manifest.json</code>?</p>