How to use the webpack.HashedModuleIdsPlugin function in webpack

function prodWebpackConfigs(config) {
  // const CopyWebpackPlugin = require('copy-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const webpack = require('webpack');
  const merge = require('webpack-merge');
  const baseWebpackConfig = require('./base-config');

  const plugins = [
    // Extract css into its own file
    new MiniCssExtractPlugin({
      filename: 'static/css/[name].[contenthash].css',
    }),
    // Keep module.id stable when vendor modules don't change
    new webpack.HashedModuleIdsPlugin(),
    // // Split vendor js into its own file
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'vendor',
    //   minChunks(module) {
    //     // Any required modules inside node_modules are extracted to vendor
    //     return (
    //       module.resource && /\.js$/.test(module.resource) && module.resource.indexOf('/node_modules/') > 0
    //       // module.resource.indexOf(path.join(config.projectDir, 'node_modules')) === 0
    //     );
    //   },
    // }),
    // // Extract webpack runtime and module manifest to its own file in order to
    // // prevent vendor hash from being updated whenever app bundle is updated
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'manifest',
    //   minChunks: Infinity,

// Dll reference speeds up development by grouping all of your vendor dependencies
      // in a DLL file. This is not compiled again, unless package.json contents
      // have changed.
      new webpack.DllReferencePlugin({
        context: config.rootDir,
        manifest: require(path.resolve(config.assetsDir, '__vendor_dlls__.json')),
      }),
    );
  }
  if (_PROD) {
    browserConfig.plugins.push(
      new WebpackDigestHash(),
      // Use HashedModuleIdsPlugin to generate IDs that preserves over builds
      // @see https://github.com/webpack/webpack.js.org/issues/652#issuecomment-273324529
      // @NOTE: if using flushChunkNames rather than flushModuleIds you must disable this...
      new webpack.HashedModuleIdsPlugin(),
      new StatsPlugin('client-stats.json'),
      config.useBabili
        ? new BabelMinifyPlugin()
        : new UglifyPlugin({
            compress: true,
            mangle: true,
            comments: false,
            sourceMap: true,
          }),
    );
  }
  return browserConfig;
};

vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
          },
        },
      },
    },
    plugins: [
      isClient && new ExtractCssChunks(),
      isServer &&
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 1,
        }),
      isClient && isDev && new webpack.HotModuleReplacementPlugin(),
      isClient && isProd && new StatsPlugin('stats.json'),
      isClient && isProd && new webpack.HashedModuleIdsPlugin(), // not needed for strategy to work (just good practice)
      new WriteFilePlugin(),
    ].filter(Boolean),
  }
}

target !== 'web'
          ? // Client
            state.clientChunkMetadata
          : /**
             * Server
             * Don't wait for the client manifest on the client.
             * The underlying plugin handles client instrumentation on its own.
             */
            void 0
      ),
      env === 'development' &&
        watch &&
        new webpack.HotModuleReplacementPlugin(),
      env === 'production' &&
        target === 'web' &&
        new webpack.HashedModuleIdsPlugin(),
      target === 'web' &&
        // case-insensitive paths can cause problems
        new CaseSensitivePathsPlugin(),
      target === 'node' &&
        new webpack.BannerPlugin({
          raw: true,
          entryOnly: false,
          // source-map-support is a dep of framework, so we need to resolve this path
          banner: `require('${require.resolve(
            'source-map-support'
          )}').install();`,
        }),
      target === 'node' &&
        new webpack.BannerPlugin({
          raw: true,
          entryOnly: true,

dll: ['react', 'react-dom'],
                  },
                  config: {
                    devtool,
                    mode: webpackMode,
                    resolve: resolveConfig,
                  },
                })
              )
              devPlugins.push(new webpack.HotModuleReplacementPlugin())
            }

            return devPlugins
          })()
        : []),
      !dev && new webpack.HashedModuleIdsPlugin(),
      !dev &&
        new webpack.IgnorePlugin({
          checkResource: (resource: string) => {
            return /react-is/.test(resource)
          },
          checkContext: (context: string) => {
            return (
              /next-server[\\/]dist[\\/]/.test(context) ||
              /next[\\/]dist[\\/]/.test(context)
            )
          },
        }),
      isServerless && isServer && new ServerlessPlugin(),
      isServer && new PagesManifestPlugin(isLikeServerless),
      target === 'server' &&
        isServer &&

host: '0.0.0.0',
    historyApiFallback: true,
    disableHostCheck: true,
    proxy: {
      '/api': {
        target: 'http://api.development.com',
        pathRewrite: { '^/api': '' },
        changeOrigin: true
      }
    }
  };
} else {
  config.stats = 'none';
  config.plugins.push(
    new CleanWebpackPlugin(),
    new webpack.HashedModuleIdsPlugin(),
    new ScriptExtHtmlWebpackPlugin({
      inline: [/runtime\.[a-z0-9]{8}\.js$/],
      preload: {
        chunks: 'initial',
        test: [/vendors\.[a-z0-9]{8}\.js$/, /main\.[a-z0-9]{8}\.js$/]
      }
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].css'
    }),
    new OptimizeCssAssetsPlugin(),
    new WebpackStylish()
  );
  config.optimization = {
    runtimeChunk: { name: 'runtime' },

const webpack = require('webpack');
const Visualizer = require('webpack-visualizer-plugin');

require('./src/config/environment');
const { SRC } = require('./src/config/paths');
const defaultConfig = require('./webpack.common');

const prodConfig = Object.assign({}, defaultConfig, {
  mode: 'production',
  entry: {
    app: [`${SRC}/styles/app.scss`, `${SRC}/client-entry.jsx`],
    polyfills: [`${SRC}/polyfills.js`]
  }
});

prodConfig.plugins.unshift(new webpack.HashedModuleIdsPlugin());
prodConfig.plugins.unshift(new Visualizer({ filename: '../webpack-stats.html' }));

module.exports = prodConfig;

__SERVER__: true,
            })
        ),
    ],
};

if (__DEVELOPMENT__ === true) {
    server.plugins.unshift(new webpack.NamedModulesPlugin());
}

if (__PRODUCTION_RELEASE__ === false) {
    server.plugins.unshift(new webpack.NoEmitOnErrorsPlugin());
}

if (__DEVELOPMENT__ === false) {
    server.plugins.unshift(new webpack.HashedModuleIdsPlugin());
}

module.exports = server;

loader: watch ? 'url-loader' : 'file-loader'
				}
			]
		},

		node: PROD ? {
			console: false,
			Buffer: false,
			__filename: false,
			__dirname: false,
			setImmediate: false
		} : {},

		plugins: [].concat(
			PROD ? [
				new webpack.HashedModuleIdsPlugin()
			] : [
				new webpack.HotModuleReplacementPlugin()
			],

			new webpack.LoaderOptionsPlugin({
				minimize: PROD,
				debug: !PROD
			}),

			new ProgressBarPlugin({
				format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m',
				renderThrottle: 100,
				summary: false
			}),

			new webpack.DefinePlugin({

function getProductionPlugins() {
  return {
    plugins: [
      new webpack.EnvironmentPlugin({ 'NODE_ENV': 'production' }),
      new LicenseWebpackPlugin({ pattern: /^(MIT|ISC|BSD.*)$/, suppressErrors: true, perChunkOutput: false, outputFilename: `3rdpartylicenses.txt` }),
      new PurifyPlugin(),
      new webpack.HashedModuleIdsPlugin(),
      new webpack.optimize.ModuleConcatenationPlugin(),
      new UglifyJSPlugin({
        sourceMap: false,
        parallel: true,
        uglifyOptions: {
          ecma: 6,
          warnings: false,
          ie8: false,
          mangle: {
            safari10: true,
          },
          compress: { typeofs: false, pure_getters: true, passes: 3 },
          output: {
            ascii_only: true,
            comments: false,
            webkit: true,