How to use the webpack.NamedModulesPlugin function in webpack

version: pkg.version,
            // Rollbar can't have a trailing slash. Ends up creating
            // URLS like: //gw2armory.com//3-chunk.9a82d951.js
            publicPath: publicPath.slice(0, publicPath.length - 1),
          }),

        // Moment.js is an extremely popular library that bundles large locale files
        // by default due to how Webpack interprets its code. This is a practical
        // solution that requires the user to opt into importing specific locales.
        // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
        // You can remove this if you don't use Moment.js:
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

        // See: https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
        // >> Start longterm caching strategy.
        longTermCache && new webpack.NamedModulesPlugin(),

        longTermCache &&
          new webpack.NamedChunksPlugin(chunk => {
            return chunk.name
              ? chunk.name
              : chunk.modules.map(m => path.relative(m.context, m.request)).join('_');
          }),

        longTermCache &&
          new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity,
          }),

        longTermCache &&
          new webpack.optimize.CommonsChunkPlugin({

preset: [
              "default",
              {
                discardComments: {
                  removeAll: true,
                },
              },
            ],
          },
        }),
      // Pre-compress all the assets as they will be served as is.
      new CompressionPlugin({})
    ),
    ...ifWatch(
      // Add module names to factory functions so they appear in browser profiler.
      new webpack.NamedModulesPlugin(),
      // Watcher doesn't work well if you mistype casing in a path so we use
      // a plugin that prints an error when you attempt to do this.
      // See https://github.com/facebookincubator/create-react-app/issues/240
      new CaseSensitivePathsPlugin(),
      // If you require a missing module and then `npm install` it, you still have
      // to restart the development server for Webpack to discover it. This plugin
      // makes the discovery automatic so you don't have to restart.
      // See https://github.com/facebookincubator/create-react-app/issues/186
      new WatchMissingNodeModulesPlugin(paths.appNodeModules)
    ),
  ];

  const devtool = disableSourcemaps
    ? false
    : isProduction
    ? // We generate sourcemaps in production. This is slow but gives good results.

}),
    new ExtractTextPlugin('[name].css'),
    new webpack.NoEmitOnErrorsPlugin(),
    new RaxWebpackPlugin({
      target: 'umd',
      // externalBuiltinModules: false,
      platforms: ['web'],
    }),
  ];

  if (universal) {
    plugins.push(new app.IsomorphicPlugin(universal));
  }

  if (dev) {
    plugins.push(new webpack.NamedModulesPlugin());
    plugins.push(new webpack.HotModuleReplacementPlugin());
  } else {
    plugins.push(
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
        },
      })
    );
  }

  const config = {
    target: 'web',
    devtool: dev ? 'eval' : false,
    context: app.config.baseDir,
    entry: webpackConfig.entry,

GITHUB_URL: JSON.stringify(packageJson.repository.url),
      USE_PREACT
    }
  })
  const monitor =
    USE_MONITOR &&
    new WebpackMonitor({
      launch: true, // -> default 'false'
      port: 3030 // default -> 8081
    })
  const concatPlugin = new webpack.optimize.ModuleConcatenationPlugin()
  const plugins = [envPlugin, concatPlugin]
  if (env === 'development') {
    // plugins.push(monitor)
    plugins.push(new webpack.HotModuleReplacementPlugin())
    plugins.push(new webpack.NamedModulesPlugin())
    // Get the html template
    const html = getFullPage({ isDev: true })
    plugins.push(
      new HtmlWebpackPlugin({
        inject: false,
        templateContent: html
      })
    )
  } else {
    // ExtractTextPlugin used to generate a separate CSS file, in production only.
    // documentation: http://webpack.github.io/docs/stylesheets.html
    plugins.push(new ExtractTextPlugin('build/[name].css'))
    if (USE_MONITOR) plugins.push(monitor)

    // Do not display warning messages from Uglify
    plugins.push(

module.exports = (
  clientConfig: WebpackConfig,
  devServerPort: number,
  devServerHost: string,
): WebpackConfig => {
  const config = clone(clientConfig);
  config.devtool = 'cheap-module-source-map';
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  );
  config.entry = Object.keys(config.entry).reduce((prev, curr) => {
    return Object.assign(prev, {
      [curr]: [
        'eventsource-polyfill',
        'react-hot-loader/patch',
        `webpack-hot-middleware/client?path=http://${devServerHost}:${devServerPort}/__webpack_hmr`,
        'webpack/hot/only-dev-server',
      ].concat(config.entry[curr]),
    });
  }, {});
  // Add react transformation to babel-loader plugins.
  updateBabelLoaderConfig(config, (options: BabelOptions): BabelOptions => {
    return {
      ...options,
      plugins: [...options.plugins, 'react-hot-loader/babel'],

result.plugins.push(
                    new DevModePlugin({
                        template,
                        ...webpackCompilerHook
                    })
                );
                try {
                    if (parseInt(getModuleVersion('webpack')) >= 5) {
                        if (typeof result.optimization !== 'object')
                            result.optimization = {};
                        result.optimization.moduleIds = 'named';
                    } else {
                        result.plugins.push(new webpack.NamedModulesPlugin());
                    }
                } catch (e) {
                    result.plugins.push(new webpack.NamedModulesPlugin());
                }
                result.plugins.push(
                    new webpack.HotModuleReplacementPlugin(
                        Object.assign({}, hmrOptions, webpackHmr)
                    )
                );
                // if (!createDll) {
                //     if (typeof result.resolve !== 'object') result.resolve = {};
                //     if (typeof result.resolve.alias !== 'object')
                //         result.resolve.alias = {};
                //     if (!result.resolve.alias['react-dom'])
                //         result.resolve.alias['react-dom'] =
                //             '@hot-loader/react-dom';
                // }
            }

collapseWhitespace: true,
  },
  version: config.version,
  last_modify: new Date().toISOString(),
  api: config.globals.__API__ || '""',
}))

// Development Tools
// ------------------------------------
if (__DEV__) {
  webpackConfig.entry.main.push(
    `webpack-hot-middleware/client.js?path=${config.publicPath}__webpack_hmr`
  )
  webpackConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  )
}

// Bundle Splitting
// ------------------------------------
if (!__TEST__) {
  const bundles = ['manifest']

  if (config.vendors && config.vendors.length) {
    bundles.unshift('vendor')
    webpackConfig.entry.vendor = config.vendors
  }
  webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({ names: bundles }))
}

// Production Optimizations

new ExtractText('styles.[hash].css'),
			new SWPrecache({
				minify: true,
				filename: 'sw.js',
				stripPrefix: 'dist',
				dontCacheBustUrlsMatching: /./,
				staticFileGlobs: ['dist/static/**'],
				navigateFallback: '/static/index.html',
				staticFileGlobsIgnorePatterns: [/\.map$/]
			})
		);
	} else {
		// dev only
		plugins.push(
			new webpack.HotModuleReplacementPlugin(),
			new webpack.NamedModulesPlugin()
		);
	}

	return plugins;
};

},
        {
          urlPattern: '/tag/:tag',
          handler: 'networkFirst'
        }
      ]
    })
  )
  if (config.build.bundleAnalyzerReport) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackClientConfig.plugins.push(new BundleAnalyzerPlugin())
  }
} else {
  webpackClientConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new FriendlyErrorsPlugin()
  )
}

module.exports = webpackClientConfig

{
        test: /\.scss$/,
        include: [
          path.resolve(path.resolve(__dirname, 'src/layout')),
        ],
        use: [...globalCSSLoaders, ...sassLoaders],
      },
      {
        test: /\.html$/,
        use: 'html',
      },
    ]),
  },

  plugins: compact([
    dev(new webpack.NamedModulesPlugin()),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        minimize: true,
        debug: false,
        context: __dirname,
        postcss() {
          return {
            defaults: [autoprefixer],
          };
        },
        svgoConfig: {
          plugins: [
            { removeXMLNS: true },
            { cleanupIDs: false },
            { convertShapeToPath: false },