setup webpack files for firefox/chrome builds

webpack.config.ts

@@ -4,15 +4,24 @@ import * as webpack from 'webpack';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
 
+type BrowserTypes = 'chrome' | 'firefox';
+
 const publicFolder = join(__dirname, 'public');
 const cssFolder = join(publicFolder, 'css');
 const fontFolder = join(publicFolder, 'fonts');
-export default (): webpack.Configuration[] => {
-  const cfgs: webpack.Configuration[] = [];
-  const chromeExtCfg: webpack.Configuration = {
+const graphicsFolder = join(__dirname, 'graphics');
+const srcFolder = join(__dirname, 'src');
+const htmlFolder = join(srcFolder, 'html');
+const manifestFile = join(__dirname, 'manifest.json');
+
+const getConfigByBrowser = (isProd: boolean, browser: BrowserTypes): webpack.Configuration => {
+  const cfg: webpack.Configuration = {
     entry: {
-      app: [join(__dirname, 'src', 'app.tsx')],
+      background: [join(srcFolder, 'background.ts')],
+      options: [join(srcFolder, 'options.tsx')],
+      popup: [join(srcFolder, 'popup.tsx')],
     },
+    mode: isProd ? 'production' : 'development',
     module: {
       rules: [
         {
@@ -23,7 +32,7 @@ export default (): webpack.Configuration[] => {
     },
     output: {
       filename: '[name].js',
-      path: join(__dirname, 'dist', 'chrome'),
+      path: join(__dirname, 'dist', browser),
     },
     plugins: [
       new CleanWebpackPlugin(),
@@ -31,6 +40,10 @@ export default (): webpack.Configuration[] => {
         patterns: [
           { from: cssFolder, to: 'public/css' },
           { from: fontFolder, to: 'public/fonts' },
+          { from: graphicsFolder, to: 'graphics' },
+          { from: htmlFolder },
+          // TODO: Create a mechanism to have a firefox manifest vs chrome
+          { from: manifestFile },
         ],
       }),
     ],
@@ -38,7 +51,9 @@ export default (): webpack.Configuration[] => {
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
     },
   };
-  cfgs.push(chromeExtCfg);
-
-  return cfgs;
+  return cfg;
+};
+export default (env: Record<string, string>): webpack.Configuration[] => {
+  const isProd = env.mode === 'production';
+  return [getConfigByBrowser(isProd, 'chrome'), getConfigByBrowser(isProd, 'firefox')];
 };