webpack.client.config.js

const webpack = require("webpack");
const path = require("path");
const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PreloadWebpackPlugin = require("preload-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackPwaManifest = require('webpack-pwa-manifest')
const { GenerateSW } = require('workbox-webpack-plugin');

// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

const root = path.join(__dirname, "..");
const prod = process.env.NODE_ENV === "production";

module.exports = (options = {}) => merge(
	require("./webpack.general.config")(options), {
	devtool: prod ? "source-map" : "cheap-module-eval-source-map",
	mode: prod ? "production" : "development",
	entry: prod ? options.entry : [
		"webpack-hot-middleware/client?reload=true&quiet=true",
		options.entry,
	],
	module: {
		rules: [{
			test: /\.s?css$/,
			// This is required otherwise it'll fail to resolve CSS in common.
			include: root,
			use: [{
				loader: MiniCssExtractPlugin.loader,
			}, {
				loader: "css-loader",
			}, {
				loader: "sass-loader",
			}],
		}, {
			test: /\.(svg|png|ttf|woff|eot|woff2)$/,
			use: [{
				loader: "file-loader",
				options: {
					name: "[path][name].[ext]",
				},
			}],
		}],
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: "[name].css",
			chunkFilename: "[id].css",
		}),
		new HtmlWebpackPlugin({
			template: options.template,
		}),
		new PreloadWebpackPlugin({
			rel: "preload",
			as: "script",
    }),
    new WebpackPwaManifest({
      name: "Coder",
      short_name: "Coder",
      description: "Run VS Code on a remote server",
      background_color: "#303030",
      icons: [
        {
          src: path.resolve("./assets/logo.png"),
          sizes: [96, 128, 192, 256, 384]
        }
      ]
    }),
	].concat(prod ? [
    new GenerateSW({
      runtimeCaching: [{
        urlPattern: "",
        handler: 'StaleWhileRevalidate',
        options: {
          cacheName: 'code-server',
          expiration: {
            maxAgeSeconds: 86400,
          },
          cacheableResponse: {
            statuses: [0, 200],
          },
        },
      }
      // Network first caching is also possible.
      /*{
        urlPattern: "",
        handler: 'NetworkFirst',
        options: {
          networkTimeoutSeconds: 4,
          cacheName: 'code-server',
          expiration: {
            maxAgeSeconds: 86400,
          },
          cacheableResponse: {
            statuses: [0, 200],
          },
        },
      }*/]    
    }),
  ] : [
		new webpack.HotModuleReplacementPlugin(),
	]),
	target: "web",
});