import path from "path" import webpack, { Configuration } from "webpack" import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin" import MiniCssExtractPlugin from "mini-css-extract-plugin" import CssMinimizerPlugin from "css-minimizer-webpack-plugin" import CompressionPlugin from "compression-webpack-plugin" import merge from "webpack-merge" import baseConfig, { isDev, getClientEnvironment } from "./base.config" const getPlugins = () => { let plugins = [ new MiniCssExtractPlugin({ // Don't use hash in development, we need the persistent for "renderHtml.ts" filename: isDev ? "[name].css" : "[name].[contenthash].css", chunkFilename: isDev ? "[id].css" : "[id].[contenthash].css", }), new webpack.DefinePlugin(getClientEnvironment(["FORCE_ORANGE_PUBLIC_VAPID_KEY"])), ] as any[] if (isDev) plugins = [ ...plugins, new webpack.HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin({ overlay: { sockIntegration: "whm" } }), new webpack.DefinePlugin({ process: "process/browser", }), ] if (!isDev) plugins = [ ...plugins, // Prepare compressed versions of assets to serve them with Content-Encoding new CompressionPlugin(), ] return plugins } const config: Configuration = { devtool: isDev ? "inline-source-map" : "hidden-source-map", entry: isDev ? ["webpack-hot-middleware/client?reload=true", "./src/client"] : "./src/client", output: { filename: isDev ? "[name].js" : "[name].[contenthash].js", chunkFilename: isDev ? "[id].js" : "[id].[contenthash].js", path: path.resolve(process.cwd(), "public/assets"), publicPath: "/assets/", }, optimization: { minimizer: [new CssMinimizerPlugin()] }, plugins: getPlugins(), performance: { maxAssetSize: 512000, maxEntrypointSize: 512000, }, } export default merge(baseConfig(true), config)