bitburner-src/webpack.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
var path = require("path");
var webpack = require("webpack");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = (env, argv) => {
  const isDevServer = (env || {}).devServer === true;
  const runInContainer = (env || {}).runInContainer === true;
  const isDevelopment = argv.mode === "development";
  const outputDirectory = isDevServer ? "dist-dev" : "dist";
  const entries = {};
  entries[`${outputDirectory}/engine`] = "./src/engine.jsx";
  entries[`${outputDirectory}/engineStyle`] = "./src/engineStyle.js";

  const statsConfig = {
    builtAt: true,
    children: false,
    chunks: false,
    chunkGroups: false,
    chunkModules: false,
    chunkOrigins: false,
    colors: true,
    entrypoints: true,
  };

  const devServerSettings = {
    port: 8000,
    publicPath: `/`,
    stats: statsConfig,
  };

  // By default, the webpack-dev-server is not exposed outside of localhost.
  // When running in a container we need it accessible externally.
  if (runInContainer) {
    devServerSettings.disableHostCheck = true;
    devServerSettings.host = "0.0.0.0";
    devServerSettings.watchOptions = {
      poll: true,
    };
  }

  return {
    plugins: [
      new webpack.DefinePlugin({
        "process.env.NODE_ENV": isDevelopment
          ? '"development"'
          : '"production"',
      }),
      // http://stackoverflow.com/questions/29080148/expose-jquery-to-real-window-object-with-webpack
      new webpack.ProvidePlugin({
        // Automtically detect jQuery and $ as free var in modules
        // and inject the jquery library
        // This is required by many jquery plugins
        jquery: "jquery",
        jQuery: "jquery",
        $: "jquery",
      }),
      new HtmlWebpackPlugin({
        title: "Bitburner" + (isDevelopment ? " - development" : ""),
        template: "src/index.html",
        favicon: "favicon.ico",
        googleAnalytics: {
          trackingId: "UA-100157497-1",
        },
        meta: {},
        minify: isDevelopment
          ? false
          : {
              collapseBooleanAttributes: true,
              collapseInlineTagWhitespace: false,
              collapseWhitespace: false,
              conservativeCollapse: false,
              html5: true,
              includeAutoGeneratedTags: false,
              keepClosingSlash: true,
              minifyCSS: false,
              minifyJS: false,
              minifyURLs: false,
              preserveLineBreaks: false,
              preventAttributesEscaping: false,
              processConditionalComments: false,
              quoteCharacter: '"',
              removeAttributeQuotes: false,
              removeComments: false,
              removeEmptyAttributes: false,
              removeEmptyElements: false,
              removeOptionalTags: false,
              removeScriptTypeAttributes: false,
              removeStyleLinkTypeAttributes: false,
              removeTagWhitespace: false,
              sortAttributes: false,
              sortClassName: false,
              useShortDoctype: false,
            },
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
      }),
    ],
    target: "web",
    entry: entries,
    devtool: "source-map",
    output: {
      path: path.resolve(__dirname, "./"),
      filename: "[name].bundle.js",
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: "ts-loader",
          exclude: /node_modules/,
        },
        {
          test: /\.(jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.s?css$/,
          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        },
      ],
    },
    optimization: {
      removeAvailableModules: true,
      removeEmptyChunks: true,
      mergeDuplicateChunks: true,
      flagIncludedChunks: true,
      occurrenceOrder: true,
      sideEffects: true,
      providedExports: true,
      usedExports: true,
      concatenateModules: false,
      namedModules: false,
      namedChunks: false,
      minimize: !isDevelopment,
      portableRecords: true,
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: `${outputDirectory}/vendor`,
            chunks: "all",
          },
        },
      },
    },
    devServer: devServerSettings,
    resolve: {
      extensions: [".tsx", ".ts", ".js", ".jsx"],
    },
    stats: statsConfig,
  };
};