webpack.prod.js

const { merge } = require("webpack-merge"),
	{ GenerateSW } = require("workbox-webpack-plugin"),
	packageJson = require("./package"),
	{
		entry,
		output,
		cssRule,
		fontRule,
		iconRule,
		providejQuery,
		extractCss,
		createIndexHtml,
		copyStaticAssets,
		config,
	} = require("./webpack.common");

module.exports = merge(config, {
	mode: "production",

	// Use default entry
	entry,

	// Use default output with chunk hash in file names
	output: merge(output, {
		hashDigestLength: 6,
		filename: "[name]-[chunkhash].js",
		assetModuleFilename: "[name]-[contenthash][ext]",
	}),

	module: {
		rules: [
			cssRule,
			merge(fontRule, {
				generator: {
					// Include hash in file names
					filename: "fonts/[name]-[contenthash][ext]",
				},
			}),
			iconRule,
		],
	},

	// Extract full, separate source maps
	devtool: "source-map",

	plugins: [
		providejQuery,
		extractCss({ filename: "[name]-[chunkhash].css" }),
		createIndexHtml,
		copyStaticAssets,
		new GenerateSW({
			cacheId: packageJson.name,
			skipWaiting: true,
			clientsClaim: true,
		}),
	],

	// Fail if any chunks exceed performance budget
	performance: {
		hints: "error",
		maxEntrypointSize: 900000,
		maxAssetSize: 600000,
	},
});