How to use webpack-manifest-plugin - 10 common examples

let output = Object.assign(defaultOutput, config.output)

	let ManifestPluginMap = (file: ManifestPlugin.FileDescriptor) => {
		// 删除 .js 后缀，方便直接使用 obj.name 来访问
		if (file.name && /\.js$/.test(file.name)) {
			file.name = file.name.slice(0, -3)
		}
		return file
	}
	let ManifestPluginOption: ManifestPlugin.Options = {
		fileName: config.assetsPath,
		map: ManifestPluginMap
	}
	let plugins = [
		!isServer && new ManifestPlugin(ManifestPluginOption),
		// 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:
		!isServer && new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/ ),
		new webpack.DefinePlugin({
			'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
		}),

		// TypeScript type checking
		config.useTypeCheck && new ForkTsCheckerWebpackPlugin({
			typescript: resolve.sync('typescript', {
				basedir: path.join(config.root, 'node_modules'),
			}),
			async: !isProd,

],
                        targets: DEV
                            ? {
                                  chrome: 61
                              }
                            : {
                                  uglify: true
                              }
                    }
                ]
            ]
        }
    });

    config.plugins.push(
        new ManifestPlugin({
            // Force it to write to disk even when using webpack-dev-server, so it
            // can be read from express app
            writeToFileEmit: true,
            fileName: `../${outputPath}/${manifestName}`
        })
    );
    const defines = {
        process: {
            env: {
                NODE_ENV: `"${process.env.NODE_ENV || "development"}"`
            }
        }
    };

    Object.entries(env).forEach(([key, value]) => {
        defines.process.env[key] = `"${value}"`;

),
                filename: ifProduction(
                    "static/css/[name].[contenthash].css",
                    "static/css/main.css",
                ),
            }),
            getPluginBundleAnalyzer(options.stats),
            /**
             * Generate a manifest file which contains a mapping of all asset filenames
             * to their corresponding output file so that tools can pick it up without
             * having to parse `index.html`.
             *
             * @env production
             */
            ifProduction(
                new ManifestPlugin({
                    fileName: "asset-manifest.json",
                }),
            ),
            /**
             * This is necessary to emit hot updates (currently CSS only):
             *
             * @env development
             */
            ifDevelopment(new webpack.HotModuleReplacementPlugin()),
        ]),
        removeEmpty([
            /**
             * Fixes a known issue with cross-platform differences in file watchers,
             * so that webpack doesn't lose file changes when watched files change rapidly
             * https://github.com/webpack/webpack-dev-middleware#known-issues
             *

new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: true,
        },
      })
    ),
    ifProd(
      new OptimizeCssAssetsPlugin({
        canPrint: false,
      })
    ),
    ifProd(new webpack.HashedModuleIdsPlugin()),
    ifProd(new WebpackMd5Hash()),
    ifProd(
      new ManifestPlugin({
        fileName: '../manifest.json',
      })
    ),
    ifProd(
      new ChunkManifestPlugin({
        filename: '../chunk-manifest.json',
        manifestVariable: 'webpackManifest',
      })
    ),
  ].filter(x => x),
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {

enabled: options.withStats,
                env: environment,
                host: options.withStatsHost,
                name,
                outputDir: options.withStatsDir,
                port: options.withStatsPort,
            }),
            /**
             * Generate a manifest file which contains a mapping of all asset filenames
             * to their corresponding output file so that tools can pick it up without
             * having to parse `index.html`.
             *
             * @env production
             */
            ifProduction(
                new ManifestPlugin({
                    fileName: "asset-manifest.json",
                }),
                undefined,
            ),
            /**
             * This is necessary to emit hot updates (currently CSS only):
             *
             * @env development
             */
            ifDevelopment(new webpack.HotModuleReplacementPlugin(), undefined),
        ]),
        profile: options.withProfiling,
        recordsPath,
        resolve: getResolve(),
        stats: "verbose",
        target,

new SWPrecacheWebpackPlugin({
                    filename: 'service-worker.js',
                    minify: !(
                      process.env.NO_COMPRESS || process.env.COMPRESS === 'none'
                    ),
                    staticFileGlobsIgnorePatterns: [
                      /\.map$/,
                      /asset-manifest\.json$/,
                    ],
                    ...opts.serviceworker,
                  }),
                ]
              : []),
            ...(opts.manifest
              ? [
                  new ManifestPlugin({
                    fileName: 'manifest.json',
                    ...opts.manifest,
                  }),
                ]
              : []),
          ]),
      ...(isDev || (process.env.NO_COMPRESS || process.env.COMPRESS === 'none')
        ? []
        : [
            new webpack.optimize.UglifyJsPlugin({
              ...uglifyJSConfig,
              ...(opts.devtool ? { sourceMap: true } : {}),
            }),
          ]),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(

),
            filename: ifProduction(
                "static/css/[name].[contenthash].css",
                "static/css/main.css",
            ),
        }),
        getPluginBundleAnalyzer(options.stats),
        /**
         * Generate a manifest file which contains a mapping of all asset filenames
         * to their corresponding output file so that tools can pick it up without
         * having to parse `index.html`.
         *
         * @env production
         */
        ifProduction(
            new ManifestPlugin({
                fileName: "asset-manifest.json",
            })
        ),
        /**
         * This is necessary to emit hot updates (currently CSS only):
         *
         * @env development
         */
        ifDevelopment(new webpack.HotModuleReplacementPlugin()),
    ]),removeEmpty([
        /**
         * Fixes a known issue with cross-platform differences in file watchers,
         * so that webpack doesn't lose file changes when watched files change rapidly
         * https://github.com/webpack/webpack-dev-middleware#known-issues
         *
         * @env development

};
    plugins.push(new MiniCssExtractPlugin({
      filename,
      chunkFilename,
      moduleFilename
    }));
  }
  const manifestOpts = manifest === true ? {} : manifest;
  if (manifestOpts) {
    const { map } = manifestOpts;
    manifestOpts.map = (file) => {
      file.name = file.name
        .replace(/\.css\.css(|\.map)$/i, '.css$1');
      return map ? map(file) : file;
    };
    plugins.push(new ManifestPlugin(manifestOpts));
  }
  return plugins;
};