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" || process.env.CI === "true";

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]
          }
        ]
      }),
      new GenerateSW({
        runtimeCaching: [
          {
            urlPattern: new RegExp(".*"),
            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],
          },
        },
      }*/
        ]
      })
    ].concat(prod ? [] : [new webpack.HotModuleReplacementPlugin()]),
    target: "web"
  });