[PM-25910] Refactor webpack config (#16616)

This commit restructures the webpack configs for each project (i.e. web, browser, desktop, cli) such that each project has a base config that is shared in a way that requires less hard-coding of info, and more like simply calling a function with a few properties.

apps/cli/webpack.base.js

@@ -0,0 +1,102 @@
+const path = require("path");
+const webpack = require("webpack");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const nodeExternals = require("webpack-node-externals");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+const config = require("./config/config");
+
+module.exports.getEnv = function getEnv() {
+  const ENV = process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
+  return { ENV };
+};
+
+/**
+ *
+ * @param {{
+ *  configName: string;
+ *  entry: string;
+ *  tsConfig: string;
+ * }} params
+ */
+module.exports.buildConfig = function buildConfig(params) {
+  const { ENV } = module.exports.getEnv();
+
+  const envConfig = config.load(ENV);
+  config.log(`Building CLI - ${params.configName} version`);
+  config.log(envConfig);
+
+  const moduleRules = [
+    {
+      test: /\.ts$/,
+      use: "ts-loader",
+      exclude: path.resolve(__dirname, "node_modules"),
+    },
+  ];
+
+  const plugins = [
+    new CopyWebpackPlugin({
+      patterns: [{ from: "./src/locales", to: "locales" }],
+    }),
+    new webpack.DefinePlugin({
+      "process.env.BWCLI_ENV": JSON.stringify(ENV),
+    }),
+    new webpack.BannerPlugin({
+      banner: "#!/usr/bin/env node",
+      raw: true,
+    }),
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^encoding$/,
+      contextRegExp: /node-fetch/,
+    }),
+    new webpack.EnvironmentPlugin({
+      ENV: ENV,
+      BWCLI_ENV: ENV,
+      FLAGS: envConfig.flags,
+      DEV_FLAGS: envConfig.devFlags,
+    }),
+    new webpack.IgnorePlugin({
+      resourceRegExp: /canvas/,
+      contextRegExp: /jsdom$/,
+    }),
+  ];
+
+  const webpackConfig = {
+    mode: ENV,
+    target: "node",
+    devtool: ENV === "development" ? "eval-source-map" : "source-map",
+    node: {
+      __dirname: false,
+      __filename: false,
+    },
+    entry: {
+      bw: params.entry,
+    },
+    optimization: {
+      minimize: false,
+    },
+    resolve: {
+      extensions: [".ts", ".js"],
+      symlinks: false,
+      modules: [path.resolve("../../node_modules")],
+      plugins: [new TsconfigPathsPlugin({ configFile: params.tsConfig })],
+    },
+    output: {
+      filename: "[name].js",
+      path: path.resolve(__dirname, "build"),
+      clean: true,
+    },
+    module: { rules: moduleRules },
+    plugins: plugins,
+    externals: [
+      nodeExternals({
+        modulesDir: "../../node_modules",
+        allowlist: [/@bitwarden/],
+      }),
+    ],
+    experiments: {
+      asyncWebAssembly: true,
+    },
+  };
+
+  return webpackConfig;
+};

apps/cli/webpack.config.js

@@ -1,89 +1,7 @@
-const path = require("path");
+const { buildConfig } = require("./webpack.base");
-const webpack = require("webpack");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const nodeExternals = require("webpack-node-externals");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-const config = require("./config/config");
 
-if (process.env.NODE_ENV == null) {
+module.exports = buildConfig({
-  process.env.NODE_ENV = "development";
+  configName: "OSS",
-}
+  entry: "./src/bw.ts",
-const ENV = (process.env.ENV = process.env.NODE_ENV);
+  tsConfig: "./tsconfig.json",
-
+});
-const envConfig = config.load(ENV);
-config.log(envConfig);
-
-const moduleRules = [
-  {
-    test: /\.ts$/,
-    use: "ts-loader",
-    exclude: path.resolve(__dirname, "node_modules"),
-  },
-];
-
-const plugins = [
-  new CopyWebpackPlugin({
-    patterns: [{ from: "./src/locales", to: "locales" }],
-  }),
-  new webpack.DefinePlugin({
-    "process.env.BWCLI_ENV": JSON.stringify(ENV),
-  }),
-  new webpack.BannerPlugin({
-    banner: "#!/usr/bin/env node",
-    raw: true,
-  }),
-  new webpack.IgnorePlugin({
-    resourceRegExp: /^encoding$/,
-    contextRegExp: /node-fetch/,
-  }),
-  new webpack.EnvironmentPlugin({
-    ENV: ENV,
-    BWCLI_ENV: ENV,
-    FLAGS: envConfig.flags,
-    DEV_FLAGS: envConfig.devFlags,
-  }),
-  new webpack.IgnorePlugin({
-    resourceRegExp: /canvas/,
-    contextRegExp: /jsdom$/,
-  }),
-];
-
-const webpackConfig = {
-  mode: ENV,
-  target: "node",
-  devtool: ENV === "development" ? "eval-source-map" : "source-map",
-  node: {
-    __dirname: false,
-    __filename: false,
-  },
-  entry: {
-    bw: "./src/bw.ts",
-  },
-  optimization: {
-    minimize: false,
-  },
-  resolve: {
-    extensions: [".ts", ".js"],
-    symlinks: false,
-    modules: [path.resolve("../../node_modules")],
-    plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })],
-  },
-  output: {
-    filename: "[name].js",
-    path: path.resolve(__dirname, "build"),
-    clean: true,
-  },
-  module: { rules: moduleRules },
-  plugins: plugins,
-  externals: [
-    nodeExternals({
-      modulesDir: "../../node_modules",
-      allowlist: [/@bitwarden/],
-    }),
-  ],
-  experiments: {
-    asyncWebAssembly: true,
-  },
-};
-
-module.exports = webpackConfig;

apps/desktop/package.json

@@ -21,18 +21,18 @@
     "build-native": "cd desktop_native && node build.js",
     "build": "concurrently -n Main,Rend,Prel -c yellow,cyan \"npm run build:main\" \"npm run build:renderer\" \"npm run build:preload\"",
     "build:dev": "concurrently -n Main,Rend,Prel -c yellow,cyan \"npm run build:main:dev\" \"npm run build:renderer:dev\" \"npm run build:preload:dev\"",
-    "build:preload": "cross-env NODE_ENV=production webpack --config webpack.preload.js",
+    "build:preload": "cross-env NODE_ENV=production webpack --config webpack.config.js --config-name preload",
-    "build:preload:dev": "cross-env NODE_ENV=development webpack --config webpack.preload.js",
+    "build:preload:dev": "cross-env NODE_ENV=development webpack --config webpack.config.js --config-name preload",
-    "build:preload:watch": "cross-env NODE_ENV=development webpack --config webpack.preload.js --watch",
+    "build:preload:watch": "cross-env NODE_ENV=development webpack --config webpack.config.js --config-name preload --watch",
     "build:macos-extension:mac": "./desktop_native/macos_provider/build.sh && node scripts/build-macos-extension.js mac",
     "build:macos-extension:mas": "./desktop_native/macos_provider/build.sh && node scripts/build-macos-extension.js mas",
     "build:macos-extension:masdev": "./desktop_native/macos_provider/build.sh && node scripts/build-macos-extension.js mas-dev",
-    "build:main": "cross-env NODE_ENV=production webpack --config webpack.main.js",
+    "build:main": "cross-env NODE_ENV=production webpack --config webpack.config.js --config-name main",
-    "build:main:dev": "npm run build-native && cross-env NODE_ENV=development webpack --config webpack.main.js",
+    "build:main:dev": "npm run build-native && cross-env NODE_ENV=development webpack --config webpack.config.js --config-name main",
-    "build:main:watch": "npm run build-native && cross-env NODE_ENV=development webpack --config webpack.main.js --watch",
+    "build:main:watch": "npm run build-native && cross-env NODE_ENV=development webpack --config webpack.config.js --config-name main --watch",
-    "build:renderer": "cross-env NODE_ENV=production webpack --config webpack.renderer.js",
+    "build:renderer": "cross-env NODE_ENV=production webpack --config webpack.config.js --config-name renderer",
-    "build:renderer:dev": "cross-env NODE_ENV=development webpack --config webpack.renderer.js",
+    "build:renderer:dev": "cross-env NODE_ENV=development webpack --config webpack.config.js --config-name renderer",
-    "build:renderer:watch": "cross-env NODE_ENV=development webpack --config webpack.renderer.js --watch",
+    "build:renderer:watch": "cross-env NODE_ENV=development webpack --config webpack.config.js --config-name renderer --watch",
     "electron": "node ./scripts/start.js",
     "electron:ignore": "node ./scripts/start.js --ignore-certificate-errors",
     "clean:dist": "rimraf ./dist",

apps/desktop/webpack.base.js

@@ -0,0 +1,320 @@
+const path = require("path");
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const { AngularWebpackPlugin } = require("@ngtools/webpack");
+const TerserPlugin = require("terser-webpack-plugin");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+const { EnvironmentPlugin, DefinePlugin } = require("webpack");
+const configurator = require("./config/config");
+
+module.exports.getEnv = function getEnv() {
+  const NODE_ENV = process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
+  const ENV = process.env.ENV == null ? "development" : process.env.ENV;
+
+  return { NODE_ENV, ENV };
+};
+
+/**
+ * @param {{
+ *  configName: string;
+ *  renderer: {
+ *    entry: string;
+ *    entryModule: string;
+ *    tsConfig: string;
+ *  };
+ *  main: {
+ *    entry: string;
+ *    tsConfig: string;
+ *  };
+ *  preload: {
+ *    entry: string;
+ *    tsConfig: string;
+ *  };
+ * }} params
+ */
+module.exports.buildConfig = function buildConfig(params) {
+  const { NODE_ENV, ENV } = module.exports.getEnv();
+
+  console.log(`Building ${params.configName} Desktop App`);
+
+  const envConfig = configurator.load(NODE_ENV);
+  configurator.log(envConfig);
+
+  const commonConfig = {
+    resolve: {
+      extensions: [".tsx", ".ts", ".js"],
+      symlinks: false,
+      modules: [path.resolve("../../node_modules")],
+    },
+  };
+
+  const getOutputConfig = (isDev) => ({
+    filename: "[name].js",
+    path: path.resolve(__dirname, "build"),
+    ...(isDev && { devtoolModuleFilenameTemplate: "[absolute-resource-path]" }),
+  });
+
+  const mainConfig = {
+    name: "main",
+    mode: NODE_ENV,
+    target: "electron-main",
+    node: {
+      __dirname: false,
+      __filename: false,
+    },
+    entry: {
+      main: params.main.entry,
+    },
+    optimization: {
+      minimize: false,
+    },
+    output: getOutputConfig(NODE_ENV === "development"),
+    devtool: NODE_ENV === "development" ? "cheap-source-map" : false,
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: "ts-loader",
+          exclude: /node_modules\/(?!(@bitwarden)\/).*/,
+        },
+        {
+          test: /\.node$/,
+          loader: "node-loader",
+        },
+      ],
+    },
+    experiments: {
+      asyncWebAssembly: true,
+    },
+    resolve: {
+      ...commonConfig.resolve,
+      plugins: [new TsconfigPathsPlugin({ configFile: params.main.tsConfig })],
+    },
+    plugins: [
+      new CopyWebpackPlugin({
+        patterns: [
+          "./src/package.json",
+          { from: "./src/images", to: "images" },
+          { from: "./src/locales", to: "locales" },
+        ],
+      }),
+      new DefinePlugin({
+        BIT_ENVIRONMENT: JSON.stringify(NODE_ENV),
+      }),
+      new EnvironmentPlugin({
+        FLAGS: envConfig.flags,
+        DEV_FLAGS: NODE_ENV === "development" ? envConfig.devFlags : {},
+      }),
+    ],
+    externals: {
+      "electron-reload": "commonjs2 electron-reload",
+      "@bitwarden/desktop-napi": "commonjs2 @bitwarden/desktop-napi",
+    },
+  };
+
+  const preloadConfig = {
+    name: "preload",
+    mode: NODE_ENV,
+    target: "electron-preload",
+    node: {
+      __dirname: false,
+      __filename: false,
+    },
+    entry: {
+      preload: params.preload.entry,
+    },
+    optimization: {
+      minimize: false,
+    },
+    output: getOutputConfig(NODE_ENV === "development"),
+    devtool: NODE_ENV === "development" ? "cheap-source-map" : false,
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: "ts-loader",
+          exclude: /node_modules\/(?!(@bitwarden)\/).*/,
+        },
+      ],
+    },
+    resolve: {
+      ...commonConfig.resolve,
+      plugins: [new TsconfigPathsPlugin({ configFile: params.preload.tsConfig })],
+    },
+    plugins: [
+      new DefinePlugin({
+        BIT_ENVIRONMENT: JSON.stringify(NODE_ENV),
+      }),
+    ],
+  };
+
+  const rendererConfig = {
+    name: "renderer",
+    mode: NODE_ENV,
+    devtool: "source-map",
+    target: "web",
+    node: {
+      __dirname: false,
+    },
+    entry: {
+      "app/main": params.renderer.entry,
+    },
+    output: {
+      filename: "[name].js",
+      path: path.resolve(__dirname, "build"),
+    },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            // Replicate Angular CLI behaviour
+            compress: {
+              global_defs: {
+                ngDevMode: false,
+                ngI18nClosureMode: false,
+              },
+            },
+          },
+        }),
+      ],
+      splitChunks: {
+        cacheGroups: {
+          commons: {
+            test: /[\\/]node_modules[\\/]/,
+            name: "app/vendor",
+            chunks: (chunk) => {
+              return chunk.name === "app/main";
+            },
+          },
+        },
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.[cm]?js$/,
+          use: [
+            {
+              loader: "babel-loader",
+              options: {
+                configFile: "../../babel.config.json",
+              },
+            },
+          ],
+        },
+        {
+          test: /\.[jt]sx?$/,
+          loader: "@ngtools/webpack",
+        },
+        {
+          test: /\.(html)$/,
+          loader: "html-loader",
+        },
+        {
+          test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+          exclude: /loading.svg/,
+          generator: {
+            filename: "fonts/[name].[contenthash][ext]",
+          },
+          type: "asset/resource",
+        },
+        {
+          test: /\.(jpe?g|png|gif|svg)$/i,
+          exclude: /.*(bwi-font)\.svg/,
+          generator: {
+            filename: "images/[name][ext]",
+          },
+          type: "asset/resource",
+        },
+        {
+          test: /\.css$/,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+            },
+            "css-loader",
+            "resolve-url-loader",
+            {
+              loader: "postcss-loader",
+              options: {
+                sourceMap: true,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                publicPath: "../",
+              },
+            },
+            "css-loader",
+            "resolve-url-loader",
+            {
+              loader: "sass-loader",
+              options: {
+                sourceMap: true,
+              },
+            },
+          ],
+        },
+        // Hide System.import warnings. ref: https://github.com/angular/angular/issues/21560
+        {
+          test: /[\/\\]@angular[\/\\].+\.js$/,
+          parser: { system: true },
+        },
+      ],
+    },
+    experiments: {
+      asyncWebAssembly: true,
+    },
+    resolve: {
+      ...commonConfig.resolve,
+      fallback: {
+        path: require.resolve("path-browserify"),
+        fs: false,
+      },
+    },
+    plugins: [
+      new AngularWebpackPlugin({
+        tsConfigPath: params.renderer.tsConfig,
+        entryModule: params.renderer.entryModule,
+        sourceMap: true,
+      }),
+      // ref: https://github.com/angular/angular/issues/20357
+      new webpack.ContextReplacementPlugin(
+        /\@angular(\\|\/)core(\\|\/)fesm5/,
+        path.resolve(__dirname, "./src"),
+      ),
+      new HtmlWebpackPlugin({
+        template: "./src/index.html",
+        filename: "index.html",
+        chunks: ["app/vendor", "app/main"],
+      }),
+      new webpack.SourceMapDevToolPlugin({
+        include: ["app/main.js"],
+      }),
+      new MiniCssExtractPlugin({
+        filename: "[name].[contenthash].css",
+        chunkFilename: "[id].[contenthash].css",
+      }),
+      new webpack.DefinePlugin({
+        BIT_ENVIRONMENT: JSON.stringify(NODE_ENV),
+      }),
+      new webpack.EnvironmentPlugin({
+        ENV: ENV,
+        FLAGS: envConfig.flags,
+        DEV_FLAGS: NODE_ENV === "development" ? envConfig.devFlags : {},
+        ADDITIONAL_REGIONS: envConfig.additionalRegions ?? [],
+      }),
+    ],
+  };
+
+  return [mainConfig, rendererConfig, preloadConfig];
+};

apps/desktop/webpack.config.js

@@ -0,0 +1,18 @@
+const { buildConfig } = require("./webpack.base");
+
+module.exports = buildConfig({
+  configName: "OSS",
+  renderer: {
+    entry: "./src/app/main.ts",
+    entryModule: "src/app/app.module#AppModule",
+    tsConfig: "./tsconfig.renderer.json",
+  },
+  main: {
+    entry: "./src/entry.ts",
+    tsConfig: "./tsconfig.json",
+  },
+  preload: {
+    entry: "./src/preload.ts",
+    tsConfig: "./tsconfig.json",
+  },
+});

apps/desktop/webpack.main.js

@@ -1,93 +0,0 @@
-const path = require("path");
-const { merge } = require("webpack-merge");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-const configurator = require("./config/config");
-const { EnvironmentPlugin, DefinePlugin } = require("webpack");
-
-const NODE_ENV = process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
-
-console.log("Main process config");
-const envConfig = configurator.load(NODE_ENV);
-configurator.log(envConfig);
-
-const common = {
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: "ts-loader",
-        exclude: /node_modules\/(?!(@bitwarden)\/).*/,
-      },
-    ],
-  },
-  plugins: [],
-  resolve: {
-    extensions: [".tsx", ".ts", ".js"],
-    plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })],
-  },
-};
-
-const prod = {
-  output: {
-    filename: "[name].js",
-    path: path.resolve(__dirname, "build"),
-  },
-};
-
-const dev = {
-  output: {
-    filename: "[name].js",
-    path: path.resolve(__dirname, "build"),
-    devtoolModuleFilenameTemplate: "[absolute-resource-path]",
-  },
-  devtool: "cheap-source-map",
-};
-
-const main = {
-  mode: NODE_ENV,
-  target: "electron-main",
-  node: {
-    __dirname: false,
-    __filename: false,
-  },
-  entry: {
-    main: "./src/entry.ts",
-  },
-  optimization: {
-    minimize: false,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.node$/,
-        loader: "node-loader",
-      },
-    ],
-  },
-  experiments: {
-    asyncWebAssembly: true,
-  },
-  plugins: [
-    new CopyWebpackPlugin({
-      patterns: [
-        "./src/package.json",
-        { from: "./src/images", to: "images" },
-        { from: "./src/locales", to: "locales" },
-      ],
-    }),
-    new DefinePlugin({
-      BIT_ENVIRONMENT: JSON.stringify(NODE_ENV),
-    }),
-    new EnvironmentPlugin({
-      FLAGS: envConfig.flags,
-      DEV_FLAGS: NODE_ENV === "development" ? envConfig.devFlags : {},
-    }),
-  ],
-  externals: {
-    "electron-reload": "commonjs2 electron-reload",
-    "@bitwarden/desktop-napi": "commonjs2 @bitwarden/desktop-napi",
-  },
-};
-
-module.exports = merge(common, NODE_ENV === "development" ? dev : prod, main);

apps/desktop/webpack.preload.js

@@ -1,66 +0,0 @@
-const path = require("path");
-const { merge } = require("webpack-merge");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-const configurator = require("./config/config");
-const { EnvironmentPlugin, DefinePlugin } = require("webpack");
-
-const NODE_ENV = process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
-
-console.log("Preload process config");
-const envConfig = configurator.load(NODE_ENV);
-configurator.log(envConfig);
-
-const common = {
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: "ts-loader",
-        exclude: /node_modules\/(?!(@bitwarden)\/).*/,
-      },
-    ],
-  },
-  plugins: [
-    new DefinePlugin({
-      BIT_ENVIRONMENT: JSON.stringify(NODE_ENV),
-    }),
-  ],
-  resolve: {
-    extensions: [".tsx", ".ts", ".js"],
-    plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })],
-  },
-};
-
-const prod = {
-  output: {
-    filename: "[name].js",
-    path: path.resolve(__dirname, "build"),
-  },
-};
-
-const dev = {
-  output: {
-    filename: "[name].js",
-    path: path.resolve(__dirname, "build"),
-    devtoolModuleFilenameTemplate: "[absolute-resource-path]",
-  },
-  devtool: "cheap-source-map",
-};
-
-const main = {
-  mode: NODE_ENV,
-  target: "electron-preload",
-  node: {
-    __dirname: false,
-    __filename: false,
-  },
-  entry: {
-    preload: "./src/preload.ts",
-  },
-  optimization: {
-    minimize: false,
-  },
-};
-
-module.exports = merge(common, NODE_ENV === "development" ? dev : prod, main);

apps/desktop/webpack.renderer.js

@@ -1,192 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-const { merge } = require("webpack-merge");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const { AngularWebpackPlugin } = require("@ngtools/webpack");
-const TerserPlugin = require("terser-webpack-plugin");
-const configurator = require("./config/config");
-
-const NODE_ENV = process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
-
-console.log("Renderer process config");
-const envConfig = configurator.load(NODE_ENV);
-configurator.log(envConfig);
-
-const ENV = process.env.ENV == null ? "development" : process.env.ENV;
-
-const common = {
-  module: {
-    rules: [
-      {
-        test: /\.[cm]?js$/,
-        use: [
-          {
-            loader: "babel-loader",
-            options: {
-              configFile: "../../babel.config.json",
-            },
-          },
-        ],
-      },
-      {
-        test: /\.[jt]sx?$/,
-        loader: "@ngtools/webpack",
-      },
-      {
-        test: /\.(jpe?g|png|gif|svg)$/i,
-        exclude: /.*(bwi-font)\.svg/,
-        generator: {
-          filename: "images/[name][ext]",
-        },
-        type: "asset/resource",
-      },
-    ],
-  },
-  plugins: [],
-  resolve: {
-    extensions: [".tsx", ".ts", ".js"],
-    symlinks: false,
-    modules: [path.resolve("../../node_modules")],
-    fallback: {
-      path: require.resolve("path-browserify"),
-      fs: false,
-    },
-  },
-  output: {
-    filename: "[name].js",
-    path: path.resolve(__dirname, "build"),
-  },
-};
-
-const renderer = {
-  mode: NODE_ENV,
-  devtool: "source-map",
-  target: "web",
-  node: {
-    __dirname: false,
-  },
-  entry: {
-    "app/main": "./src/app/main.ts",
-  },
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          // Replicate Angular CLI behaviour
-          compress: {
-            global_defs: {
-              ngDevMode: false,
-              ngI18nClosureMode: false,
-            },
-          },
-        },
-      }),
-    ],
-    splitChunks: {
-      cacheGroups: {
-        commons: {
-          test: /[\\/]node_modules[\\/]/,
-          name: "app/vendor",
-          chunks: (chunk) => {
-            return chunk.name === "app/main";
-          },
-        },
-      },
-    },
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(html)$/,
-        loader: "html-loader",
-      },
-      {
-        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-        exclude: /loading.svg/,
-        generator: {
-          filename: "fonts/[name].[contenthash][ext]",
-        },
-        type: "asset/resource",
-      },
-      {
-        test: /\.css$/,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          "css-loader",
-          "resolve-url-loader",
-          {
-            loader: "postcss-loader",
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              publicPath: "../",
-            },
-          },
-          "css-loader",
-          "resolve-url-loader",
-          {
-            loader: "sass-loader",
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
-      // Hide System.import warnings. ref: https://github.com/angular/angular/issues/21560
-      {
-        test: /[\/\\]@angular[\/\\].+\.js$/,
-        parser: { system: true },
-      },
-    ],
-  },
-  experiments: {
-    asyncWebAssembly: true,
-  },
-  plugins: [
-    new AngularWebpackPlugin({
-      tsConfigPath: "tsconfig.renderer.json",
-      entryModule: "src/app/app.module#AppModule",
-      sourceMap: true,
-    }),
-    // ref: https://github.com/angular/angular/issues/20357
-    new webpack.ContextReplacementPlugin(
-      /\@angular(\\|\/)core(\\|\/)fesm5/,
-      path.resolve(__dirname, "./src"),
-    ),
-    new HtmlWebpackPlugin({
-      template: "./src/index.html",
-      filename: "index.html",
-      chunks: ["app/vendor", "app/main"],
-    }),
-    new webpack.SourceMapDevToolPlugin({
-      include: ["app/main.js"],
-    }),
-    new MiniCssExtractPlugin({
-      filename: "[name].[contenthash].css",
-      chunkFilename: "[id].[contenthash].css",
-    }),
-    new webpack.DefinePlugin({
-      BIT_ENVIRONMENT: JSON.stringify(NODE_ENV),
-    }),
-    new webpack.EnvironmentPlugin({
-      ENV: ENV,
-      FLAGS: envConfig.flags,
-      DEV_FLAGS: NODE_ENV === "development" ? envConfig.devFlags : {},
-      ADDITIONAL_REGIONS: envConfig.additionalRegions ?? [],
-    }),
-  ],
-};
-
-module.exports = merge(common, renderer);

apps/web/webpack.base.js

@@ -0,0 +1,431 @@
+const fs = require("fs");
+const path = require("path");
+
+const { AngularWebpackPlugin } = require("@ngtools/webpack");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const HtmlWebpackInjector = require("html-webpack-injector");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const webpack = require("webpack");
+
+const config = require("./config.js");
+const pjson = require("./package.json");
+
+module.exports.getEnv = function getEnv() {
+  const ENV = process.env.ENV == null ? "development" : process.env.ENV;
+  const NODE_ENV = process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
+  const LOGGING = process.env.LOGGING != "false";
+
+  return { ENV, NODE_ENV, LOGGING };
+};
+
+/**
+ *
+ * @param {{
+ *  configName: string;
+ *  app: {
+ *      entry: string;
+ *      entryModule: string;
+ *  };
+ *  tsConfig: string;
+ * }} params
+ */
+module.exports.buildConfig = function buildConfig(params) {
+  const { ENV, NODE_ENV, LOGGING } = module.exports.getEnv();
+
+  const envConfig = config.load(ENV);
+  if (LOGGING) {
+    config.log(`Building web - ${params.configName} version`);
+    config.log(envConfig);
+  }
+
+  const moduleRules = [
+    {
+      test: /\.(html)$/,
+      loader: "html-loader",
+    },
+    {
+      test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+      exclude: /loading(|-white).svg/,
+      generator: {
+        filename: "fonts/[name].[contenthash][ext]",
+      },
+      type: "asset/resource",
+    },
+    {
+      test: /\.(jpe?g|png|gif|svg|webp|avif)$/i,
+      exclude: /.*(bwi-font)\.svg/,
+      generator: {
+        filename: "images/[name][ext]",
+      },
+      type: "asset/resource",
+    },
+    {
+      test: /\.scss$/,
+      use: [
+        {
+          loader: MiniCssExtractPlugin.loader,
+        },
+        "css-loader",
+        "resolve-url-loader",
+        {
+          loader: "sass-loader",
+          options: {
+            sourceMap: true,
+          },
+        },
+      ],
+    },
+    {
+      test: /\.css$/,
+      use: [
+        {
+          loader: MiniCssExtractPlugin.loader,
+        },
+        "css-loader",
+        "resolve-url-loader",
+        {
+          loader: "postcss-loader",
+          options: {
+            sourceMap: true,
+          },
+        },
+      ],
+    },
+    {
+      test: /\.[cm]?js$/,
+      use: [
+        {
+          loader: "babel-loader",
+          options: {
+            configFile: "../../babel.config.json",
+            cacheDirectory: NODE_ENV !== "production",
+          },
+        },
+      ],
+    },
+    {
+      test: /\.[jt]sx?$/,
+      loader: "@ngtools/webpack",
+    },
+  ];
+
+  const plugins = [
+    new HtmlWebpackPlugin({
+      template: "./src/index.html",
+      filename: "index.html",
+      chunks: ["theme_head", "app/polyfills", "app/vendor", "app/main", "styles"],
+    }),
+    new HtmlWebpackInjector(),
+    new HtmlWebpackPlugin({
+      template: "./src/connectors/webauthn.html",
+      filename: "webauthn-connector.html",
+      chunks: ["connectors/webauthn", "styles"],
+    }),
+    new HtmlWebpackPlugin({
+      template: "./src/connectors/webauthn-mobile.html",
+      filename: "webauthn-mobile-connector.html",
+      chunks: ["connectors/webauthn", "styles"],
+    }),
+    new HtmlWebpackPlugin({
+      template: "./src/connectors/webauthn-fallback.html",
+      filename: "webauthn-fallback-connector.html",
+      chunks: ["connectors/webauthn-fallback", "styles"],
+    }),
+    new HtmlWebpackPlugin({
+      template: "./src/connectors/sso.html",
+      filename: "sso-connector.html",
+      chunks: ["connectors/sso", "styles"],
+    }),
+    new HtmlWebpackPlugin({
+      template: "./src/connectors/redirect.html",
+      filename: "redirect-connector.html",
+      chunks: ["connectors/redirect", "styles"],
+    }),
+    new HtmlWebpackPlugin({
+      template: "./src/connectors/duo-redirect.html",
+      filename: "duo-redirect-connector.html",
+      chunks: ["connectors/duo-redirect", "styles"],
+    }),
+    new HtmlWebpackPlugin({
+      template: "./src/404.html",
+      filename: "404.html",
+      chunks: ["styles"],
+      // 404 page is a wildcard, this ensures it uses absolute paths.
+      publicPath: "/",
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: "./src/.nojekyll" },
+        { from: "./src/manifest.json" },
+        { from: "./src/favicon.ico" },
+        { from: "./src/browserconfig.xml" },
+        { from: "./src/app-id.json" },
+        { from: "./src/images", to: "images" },
+        { from: "./src/videos", to: "videos" },
+        { from: "./src/locales", to: "locales" },
+        { from: "../../node_modules/qrious/dist/qrious.min.js", to: "scripts" },
+        { from: "../../node_modules/braintree-web-drop-in/dist/browser/dropin.js", to: "scripts" },
+        {
+          from: "./src/version.json",
+          transform(content, path) {
+            return content.toString().replace("process.env.APPLICATION_VERSION", pjson.version);
+          },
+        },
+      ],
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name].[contenthash].css",
+      chunkFilename: "[id].[contenthash].css",
+    }),
+    new webpack.ProvidePlugin({
+      process: "process/browser.js",
+    }),
+    new webpack.EnvironmentPlugin({
+      ENV: ENV,
+      NODE_ENV: NODE_ENV === "production" ? "production" : "development",
+      APPLICATION_VERSION: pjson.version,
+      CACHE_TAG: Math.random().toString(36).substring(7),
+      URLS: envConfig["urls"] ?? {},
+      STRIPE_KEY: envConfig["stripeKey"] ?? "",
+      BRAINTREE_KEY: envConfig["braintreeKey"] ?? "",
+      PAYPAL_CONFIG: envConfig["paypal"] ?? {},
+      FLAGS: envConfig["flags"] ?? {},
+      DEV_FLAGS: NODE_ENV === "development" ? envConfig["devFlags"] : {},
+      ADDITIONAL_REGIONS: envConfig["additionalRegions"] ?? [],
+    }),
+    new AngularWebpackPlugin({
+      tsconfig: params.tsConfig,
+      entryModule: params.app.entryModule,
+      sourceMap: true,
+    }),
+  ];
+
+  // ref: https://webpack.js.org/configuration/dev-server/#devserver
+  let certSuffix = fs.existsSync("dev-server.local.pem") ? ".local" : ".shared";
+  const devServer =
+    NODE_ENV !== "development"
+      ? {}
+      : {
+          server: {
+            type: "https",
+            options: {
+              key: fs.readFileSync("dev-server" + certSuffix + ".pem"),
+              cert: fs.readFileSync("dev-server" + certSuffix + ".pem"),
+            },
+          },
+          // host: '192.168.1.9',
+          proxy: [
+            {
+              context: ["/api"],
+              target: envConfig.dev?.proxyApi,
+              pathRewrite: { "^/api": "" },
+              secure: false,
+              changeOrigin: true,
+            },
+            {
+              context: ["/identity"],
+              target: envConfig.dev?.proxyIdentity,
+              pathRewrite: { "^/identity": "" },
+              secure: false,
+              changeOrigin: true,
+            },
+            {
+              context: ["/events"],
+              target: envConfig.dev?.proxyEvents,
+              pathRewrite: { "^/events": "" },
+              secure: false,
+              changeOrigin: true,
+            },
+            {
+              context: ["/notifications"],
+              target: envConfig.dev?.proxyNotifications,
+              pathRewrite: { "^/notifications": "" },
+              secure: false,
+              changeOrigin: true,
+              ws: true,
+            },
+            {
+              context: ["/icons"],
+              target: envConfig.dev?.proxyIcons,
+              pathRewrite: { "^/icons": "" },
+              secure: false,
+              changeOrigin: true,
+            },
+          ],
+          headers: (req) => {
+            if (!req.originalUrl.includes("connector.html")) {
+              return {
+                "Content-Security-Policy": `
+                    default-src 'self'
+                    ;script-src
+                    'self'
+                    'wasm-unsafe-eval'
+                    'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w='
+                    https://js.stripe.com
+                    https://js.braintreegateway.com
+                    https://www.paypalobjects.com
+                    ;style-src
+                    'self'
+                    https://assets.braintreegateway.com
+                    https://*.paypal.com
+                    ${"'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='" /* date input polyfill */}
+                    ${"'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4='" /* date input polyfill */}
+                    ${"'sha256-EnIJNDxVnh0++RytXJOkU0sqtLDFt1nYUDOfeJ5SKxg='" /* ng-select */}
+                    ${"'sha256-dbBsIsz2pJ5loaLjhE6xWlmhYdjl6ghbwnGSCr4YObs='" /* cdk-virtual-scroll */}
+                    ${"'sha256-S+uMh1G1SNQDAMG3seBmknQ26Wh+KSEoKdsNiy0joEE='" /* cdk-visually-hidden */}
+                    ;img-src
+                    'self'
+                    data:
+                    https://icons.bitwarden.net
+                    https://*.paypal.com
+                    https://www.paypalobjects.com
+                    https://q.stripe.com
+                    https://haveibeenpwned.com
+                    ;media-src
+                    'self'
+                    https://assets.bitwarden.com
+                    ;child-src
+                    'self'
+                    https://js.stripe.com
+                    https://assets.braintreegateway.com
+                    https://*.paypal.com
+                    https://*.duosecurity.com
+                    ;frame-src
+                    'self'
+                    https://js.stripe.com
+                    https://assets.braintreegateway.com
+                    https://*.paypal.com
+                    https://*.duosecurity.com
+                    ;connect-src
+                    'self'
+                    ${envConfig.dev.wsConnectSrc ?? ""}
+                    wss://notifications.bitwarden.com
+                    https://notifications.bitwarden.com
+                    https://cdn.bitwarden.net
+                    https://api.pwnedpasswords.com
+                    https://api.2fa.directory/v3/totp.json
+                    https://api.stripe.com
+                    https://www.paypal.com
+                    https://api.sandbox.braintreegateway.com
+                    https://api.braintreegateway.com
+                    https://client-analytics.braintreegateway.com
+                    https://*.braintree-api.com
+                    https://*.blob.core.windows.net
+                    http://127.0.0.1:10000
+                    https://app.simplelogin.io/api/alias/random/new
+                    https://quack.duckduckgo.com/api/email/addresses
+                    https://app.addy.io/api/v1/aliases
+                    https://api.fastmail.com
+                    https://api.forwardemail.net
+                    http://localhost:5000
+                    ;object-src
+                    'self'
+                    blob:
+                    ;`
+                  .replace(/\n/g, " ")
+                  .replace(/ +(?= )/g, ""),
+              };
+            }
+          },
+          hot: false,
+          port: envConfig.dev?.port ?? 8080,
+          allowedHosts: envConfig.dev?.allowedHosts ?? "auto",
+          client: {
+            overlay: {
+              errors: true,
+              warnings: false,
+              runtimeErrors: false,
+            },
+          },
+        };
+
+  const webpackConfig = {
+    mode: NODE_ENV,
+    devtool: "source-map",
+    devServer: devServer,
+    target: "web",
+    entry: {
+      "app/polyfills": "./src/polyfills.ts",
+      "app/main": params.app.entry,
+      "connectors/webauthn": "./src/connectors/webauthn.ts",
+      "connectors/webauthn-fallback": "./src/connectors/webauthn-fallback.ts",
+      "connectors/sso": "./src/connectors/sso.ts",
+      "connectors/duo-redirect": "./src/connectors/duo-redirect.ts",
+      "connectors/redirect": "./src/connectors/redirect.ts",
+      styles: ["./src/scss/styles.scss", "./src/scss/tailwind.css"],
+      theme_head: "./src/theme.ts",
+    },
+    cache:
+      NODE_ENV === "production"
+        ? false
+        : {
+            type: "filesystem",
+            allowCollectingMemory: true,
+            cacheDirectory: path.resolve(__dirname, "../../node_modules/.cache/webpack"),
+            buildDependencies: {
+              config: [__filename],
+            },
+          },
+    snapshot: {
+      unmanagedPaths: [path.resolve(__dirname, "../../node_modules/@bitwarden/")],
+    },
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          commons: {
+            test: /[\\/]node_modules[\\/]/,
+            name: "app/vendor",
+            chunks: (chunk) => {
+              return chunk.name === "app/main";
+            },
+          },
+        },
+      },
+      minimize: NODE_ENV === "production",
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            safari10: true,
+            // Replicate Angular CLI behaviour
+            compress: {
+              global_defs: {
+                ngDevMode: false,
+                ngI18nClosureMode: false,
+              },
+            },
+          },
+        }),
+      ],
+    },
+    resolve: {
+      extensions: [".ts", ".js"],
+      symlinks: false,
+      modules: [path.resolve("../../node_modules")],
+      fallback: {
+        buffer: false,
+        util: require.resolve("util/"),
+        assert: false,
+        url: false,
+        fs: false,
+        process: false,
+        path: require.resolve("path-browserify"),
+      },
+    },
+    output: {
+      filename: "[name].[contenthash].js",
+      path: path.resolve(__dirname, "build"),
+      clean: true,
+    },
+    module: {
+      rules: moduleRules,
+    },
+    experiments: {
+      asyncWebAssembly: true,
+    },
+    plugins: plugins,
+  };
+
+  return webpackConfig;
+};

apps/web/webpack.config.js

@@ -1,411 +1,10 @@
-const fs = require("fs");
+const { buildConfig } = require("./webpack.base");
-const path = require("path");
 
-const { AngularWebpackPlugin } = require("@ngtools/webpack");
+module.exports = buildConfig({
-const CopyWebpackPlugin = require("copy-webpack-plugin");
+  configName: "OSS",
-const HtmlWebpackInjector = require("html-webpack-injector");
+  app: {
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+    entry: "./src/main.ts",
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
-const webpack = require("webpack");
-
-const config = require("./config.js");
-const pjson = require("./package.json");
-
-const ENV = process.env.ENV == null ? "development" : process.env.ENV;
-const NODE_ENV = process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
-const LOGGING = process.env.LOGGING != "false";
-
-const envConfig = config.load(ENV);
-if (LOGGING) {
-  config.log(envConfig);
-}
-
-const moduleRules = [
-  {
-    test: /\.(html)$/,
-    loader: "html-loader",
-  },
-  {
-    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-    exclude: /loading(|-white).svg/,
-    generator: {
-      filename: "fonts/[name].[contenthash][ext]",
-    },
-    type: "asset/resource",
-  },
-  {
-    test: /\.(jpe?g|png|gif|svg|webp|avif)$/i,
-    exclude: /.*(bwi-font)\.svg/,
-    generator: {
-      filename: "images/[name][ext]",
-    },
-    type: "asset/resource",
-  },
-  {
-    test: /\.scss$/,
-    use: [
-      {
-        loader: MiniCssExtractPlugin.loader,
-      },
-      "css-loader",
-      "resolve-url-loader",
-      {
-        loader: "sass-loader",
-        options: {
-          sourceMap: true,
-        },
-      },
-    ],
-  },
-  {
-    test: /\.css$/,
-    use: [
-      {
-        loader: MiniCssExtractPlugin.loader,
-      },
-      "css-loader",
-      "resolve-url-loader",
-      {
-        loader: "postcss-loader",
-        options: {
-          sourceMap: true,
-        },
-      },
-    ],
-  },
-  {
-    test: /\.[cm]?js$/,
-    use: [
-      {
-        loader: "babel-loader",
-        options: {
-          configFile: "../../babel.config.json",
-          cacheDirectory: NODE_ENV !== "production",
-        },
-      },
-    ],
-  },
-  {
-    test: /\.[jt]sx?$/,
-    loader: "@ngtools/webpack",
-  },
-];
-
-const plugins = [
-  new HtmlWebpackPlugin({
-    template: "./src/index.html",
-    filename: "index.html",
-    chunks: ["theme_head", "app/polyfills", "app/vendor", "app/main", "styles"],
-  }),
-  new HtmlWebpackInjector(),
-  new HtmlWebpackPlugin({
-    template: "./src/connectors/webauthn.html",
-    filename: "webauthn-connector.html",
-    chunks: ["connectors/webauthn", "styles"],
-  }),
-  new HtmlWebpackPlugin({
-    template: "./src/connectors/webauthn-mobile.html",
-    filename: "webauthn-mobile-connector.html",
-    chunks: ["connectors/webauthn", "styles"],
-  }),
-  new HtmlWebpackPlugin({
-    template: "./src/connectors/webauthn-fallback.html",
-    filename: "webauthn-fallback-connector.html",
-    chunks: ["connectors/webauthn-fallback", "styles"],
-  }),
-  new HtmlWebpackPlugin({
-    template: "./src/connectors/sso.html",
-    filename: "sso-connector.html",
-    chunks: ["connectors/sso", "styles"],
-  }),
-  new HtmlWebpackPlugin({
-    template: "./src/connectors/redirect.html",
-    filename: "redirect-connector.html",
-    chunks: ["connectors/redirect", "styles"],
-  }),
-  new HtmlWebpackPlugin({
-    template: "./src/connectors/duo-redirect.html",
-    filename: "duo-redirect-connector.html",
-    chunks: ["connectors/duo-redirect", "styles"],
-  }),
-  new HtmlWebpackPlugin({
-    template: "./src/404.html",
-    filename: "404.html",
-    chunks: ["styles"],
-    // 404 page is a wildcard, this ensures it uses absolute paths.
-    publicPath: "/",
-  }),
-  new CopyWebpackPlugin({
-    patterns: [
-      { from: "./src/.nojekyll" },
-      { from: "./src/manifest.json" },
-      { from: "./src/favicon.ico" },
-      { from: "./src/browserconfig.xml" },
-      { from: "./src/app-id.json" },
-      { from: "./src/images", to: "images" },
-      { from: "./src/videos", to: "videos" },
-      { from: "./src/locales", to: "locales" },
-      { from: "../../node_modules/qrious/dist/qrious.min.js", to: "scripts" },
-      { from: "../../node_modules/braintree-web-drop-in/dist/browser/dropin.js", to: "scripts" },
-      {
-        from: "./src/version.json",
-        transform(content, path) {
-          return content.toString().replace("process.env.APPLICATION_VERSION", pjson.version);
-        },
-      },
-    ],
-  }),
-  new MiniCssExtractPlugin({
-    filename: "[name].[contenthash].css",
-    chunkFilename: "[id].[contenthash].css",
-  }),
-  new webpack.ProvidePlugin({
-    process: "process/browser.js",
-  }),
-  new webpack.EnvironmentPlugin({
-    ENV: ENV,
-    NODE_ENV: NODE_ENV === "production" ? "production" : "development",
-    APPLICATION_VERSION: pjson.version,
-    CACHE_TAG: Math.random().toString(36).substring(7),
-    URLS: envConfig["urls"] ?? {},
-    STRIPE_KEY: envConfig["stripeKey"] ?? "",
-    BRAINTREE_KEY: envConfig["braintreeKey"] ?? "",
-    PAYPAL_CONFIG: envConfig["paypal"] ?? {},
-    FLAGS: envConfig["flags"] ?? {},
-    DEV_FLAGS: NODE_ENV === "development" ? envConfig["devFlags"] : {},
-    ADDITIONAL_REGIONS: envConfig["additionalRegions"] ?? [],
-  }),
-  new AngularWebpackPlugin({
-    tsconfig: "tsconfig.build.json",
     entryModule: "src/app/app.module#AppModule",
-    sourceMap: true,
-  }),
-];
-
-// ref: https://webpack.js.org/configuration/dev-server/#devserver
-let certSuffix = fs.existsSync("dev-server.local.pem") ? ".local" : ".shared";
-const devServer =
-  NODE_ENV !== "development"
-    ? {}
-    : {
-        server: {
-          type: "https",
-          options: {
-            key: fs.readFileSync("dev-server" + certSuffix + ".pem"),
-            cert: fs.readFileSync("dev-server" + certSuffix + ".pem"),
   },
-        },
+  tsConfig: "tsconfig.build.json",
-        // host: '192.168.1.9',
+});
-        proxy: [
-          {
-            context: ["/api"],
-            target: envConfig.dev?.proxyApi,
-            pathRewrite: { "^/api": "" },
-            secure: false,
-            changeOrigin: true,
-          },
-          {
-            context: ["/identity"],
-            target: envConfig.dev?.proxyIdentity,
-            pathRewrite: { "^/identity": "" },
-            secure: false,
-            changeOrigin: true,
-          },
-          {
-            context: ["/events"],
-            target: envConfig.dev?.proxyEvents,
-            pathRewrite: { "^/events": "" },
-            secure: false,
-            changeOrigin: true,
-          },
-          {
-            context: ["/notifications"],
-            target: envConfig.dev?.proxyNotifications,
-            pathRewrite: { "^/notifications": "" },
-            secure: false,
-            changeOrigin: true,
-            ws: true,
-          },
-          {
-            context: ["/icons"],
-            target: envConfig.dev?.proxyIcons,
-            pathRewrite: { "^/icons": "" },
-            secure: false,
-            changeOrigin: true,
-          },
-        ],
-        headers: (req) => {
-          if (!req.originalUrl.includes("connector.html")) {
-            return {
-              "Content-Security-Policy": `
-                default-src 'self'
-                ;script-src
-                  'self'
-                  'wasm-unsafe-eval'
-                  'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w='
-                  https://js.stripe.com
-                  https://js.braintreegateway.com
-                  https://www.paypalobjects.com
-                ;style-src
-                  'self'
-                  https://assets.braintreegateway.com
-                  https://*.paypal.com
-                  ${"'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='" /* date input polyfill */}
-                  ${"'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4='" /* date input polyfill */}
-                  ${"'sha256-EnIJNDxVnh0++RytXJOkU0sqtLDFt1nYUDOfeJ5SKxg='" /* ng-select */}
-                  ${"'sha256-dbBsIsz2pJ5loaLjhE6xWlmhYdjl6ghbwnGSCr4YObs='" /* cdk-virtual-scroll */}
-                  ${"'sha256-S+uMh1G1SNQDAMG3seBmknQ26Wh+KSEoKdsNiy0joEE='" /* cdk-visually-hidden */}
-                ;img-src
-                  'self'
-                  data:
-                  https://icons.bitwarden.net
-                  https://*.paypal.com
-                  https://www.paypalobjects.com
-                  https://q.stripe.com
-                  https://haveibeenpwned.com
-                ;media-src
-                  'self'
-                  https://assets.bitwarden.com
-                ;child-src
-                  'self'
-                  https://js.stripe.com
-                  https://assets.braintreegateway.com
-                  https://*.paypal.com
-                  https://*.duosecurity.com
-                ;frame-src
-                  'self'
-                  https://js.stripe.com
-                  https://assets.braintreegateway.com
-                  https://*.paypal.com
-                  https://*.duosecurity.com
-                ;connect-src
-                  'self'
-                  ${envConfig.dev.wsConnectSrc ?? ""}
-                  wss://notifications.bitwarden.com
-                  https://notifications.bitwarden.com
-                  https://cdn.bitwarden.net
-                  https://api.pwnedpasswords.com
-                  https://api.2fa.directory/v3/totp.json
-                  https://api.stripe.com
-                  https://www.paypal.com
-                  https://api.sandbox.braintreegateway.com
-                  https://api.braintreegateway.com
-                  https://client-analytics.braintreegateway.com
-                  https://*.braintree-api.com
-                  https://*.blob.core.windows.net
-                  http://127.0.0.1:10000
-                  https://app.simplelogin.io/api/alias/random/new
-                  https://quack.duckduckgo.com/api/email/addresses
-                  https://app.addy.io/api/v1/aliases
-                  https://api.fastmail.com
-                  https://api.forwardemail.net
-                  http://localhost:5000
-                ;object-src
-                  'self'
-                  blob:
-                ;`
-                .replace(/\n/g, " ")
-                .replace(/ +(?= )/g, ""),
-            };
-          }
-        },
-        hot: false,
-        port: envConfig.dev?.port ?? 8080,
-        allowedHosts: envConfig.dev?.allowedHosts ?? "auto",
-        client: {
-          overlay: {
-            errors: true,
-            warnings: false,
-            runtimeErrors: false,
-          },
-        },
-      };
-
-const webpackConfig = {
-  mode: NODE_ENV,
-  devtool: "source-map",
-  devServer: devServer,
-  target: "web",
-  entry: {
-    "app/polyfills": "./src/polyfills.ts",
-    "app/main": "./src/main.ts",
-    "connectors/webauthn": "./src/connectors/webauthn.ts",
-    "connectors/webauthn-fallback": "./src/connectors/webauthn-fallback.ts",
-    "connectors/sso": "./src/connectors/sso.ts",
-    "connectors/duo-redirect": "./src/connectors/duo-redirect.ts",
-    "connectors/redirect": "./src/connectors/redirect.ts",
-    styles: ["./src/scss/styles.scss", "./src/scss/tailwind.css"],
-    theme_head: "./src/theme.ts",
-  },
-  cache:
-    NODE_ENV === "production"
-      ? false
-      : {
-          type: "filesystem",
-          allowCollectingMemory: true,
-          cacheDirectory: path.resolve(__dirname, "../../node_modules/.cache/webpack"),
-          buildDependencies: {
-            config: [__filename],
-          },
-        },
-  snapshot: {
-    unmanagedPaths: [path.resolve(__dirname, "../../node_modules/@bitwarden/")],
-  },
-  optimization: {
-    splitChunks: {
-      cacheGroups: {
-        commons: {
-          test: /[\\/]node_modules[\\/]/,
-          name: "app/vendor",
-          chunks: (chunk) => {
-            return chunk.name === "app/main";
-          },
-        },
-      },
-    },
-    minimize: NODE_ENV === "production",
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          safari10: true,
-          // Replicate Angular CLI behaviour
-          compress: {
-            global_defs: {
-              ngDevMode: false,
-              ngI18nClosureMode: false,
-            },
-          },
-        },
-      }),
-    ],
-  },
-  resolve: {
-    extensions: [".ts", ".js"],
-    symlinks: false,
-    modules: [path.resolve("../../node_modules")],
-    fallback: {
-      buffer: false,
-      util: require.resolve("util/"),
-      assert: false,
-      url: false,
-      fs: false,
-      process: false,
-      path: require.resolve("path-browserify"),
-    },
-  },
-  output: {
-    filename: "[name].[contenthash].js",
-    path: path.resolve(__dirname, "build"),
-    clean: true,
-  },
-  module: {
-    rules: moduleRules,
-  },
-  experiments: {
-    asyncWebAssembly: true,
-  },
-  plugins: plugins,
-};
-
-module.exports = webpackConfig;

bitwarden_license/bit-cli/webpack.config.js

@@ -1,12 +1,7 @@
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+const { buildConfig } = require("../../apps/cli/webpack.base");
 
-// Re-use the OSS CLI webpack config
+module.exports = buildConfig({
-const webpackConfig = require("../../apps/cli/webpack.config");
+  configName: "Commercial",
-
+  entry: "../../bitwarden_license/bit-cli/src/bw.ts",
-// Update paths to use the bit-cli entrypoint and tsconfig
+  tsConfig: "../../bitwarden_license/bit-cli/tsconfig.json",
-webpackConfig.entry = { bw: "../../bitwarden_license/bit-cli/src/bw.ts" };
+});
-webpackConfig.resolve.plugins = [
-  new TsconfigPathsPlugin({ configFile: "../../bitwarden_license/bit-cli/tsconfig.json" }),
-];
-
-module.exports = webpackConfig;

bitwarden_license/bit-web/webpack.config.js

@@ -1,12 +1,10 @@
-const { AngularWebpackPlugin } = require("@ngtools/webpack");
+const { buildConfig } = require("../../apps/web/webpack.base");
 
-const webpackConfig = require("../../apps/web/webpack.config");
+module.exports = buildConfig({
-
+  configName: "Commercial",
-webpackConfig.entry["app/main"] = "../../bitwarden_license/bit-web/src/main.ts";
+  app: {
-webpackConfig.plugins[webpackConfig.plugins.length - 1] = new AngularWebpackPlugin({
+    entry: "../../bitwarden_license/bit-web/src/main.ts",
-  tsconfig: "../../bitwarden_license/bit-web/tsconfig.build.json",
+    entryModule: "../../bitwarden_license/bit-web/src/app/app.module#AppModule",
-  entryModule: "bitwarden_license/src/app/app.module#AppModule",
+  },
-  sourceMap: true,
+  tsConfig: "../../bitwarden_license/bit-web/tsconfig.build.json",
 });
-
-module.exports = webpackConfig;