Update to web-ext-plugin version 2.x.x (#271)

Required addional compiler options for ts-node to be able to handle ESM
modules, which web-ext and web-ext-plugin now use. Also Webpack
configuration needed to be split for ESLint to still be able to use it.
See webpack/webpack-cli#2458 for details
regarding ts-node and ESM.

configs/.eslintrc.js

@@ -76,7 +76,8 @@ module.exports = {
     },
     'import/resolver': {
       webpack: {
-        config: path.resolve(__dirname, 'webpack.config.ts'),
+        // eslint-import-resolver-webpack only works with synchronous Webpack configs
+        config: path.resolve(__dirname, 'webpack.common.config.ts'),
       },
     },
   },

configs/tsconfig.json

@@ -18,6 +18,14 @@
     "resolveJsonModule": true,
     "outDir": "dist"
   },
+  "ts-node": {
+    // Tell ts-node CLI to install the --loader automatically, explained below
+    "esm": true,
+    "compilerOptions": {
+      "module": "CommonJS",
+      "moduleResolution": "NodeNext",
+    }
+  },
   "include": [
     "../src/"
   ],

configs/webpack.common.config.ts

@@ -0,0 +1,80 @@
+import path from 'path';
+import type { Configuration, RuleSetUseItem } from 'webpack';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+import { BrowserFamily } from '../src/manifest.json';
+
+const rootDir = path.resolve(__dirname, '..');
+export const srcDir = path.resolve(rootDir, 'src');
+
+enum WebpackMode {
+  PROD = 'production',
+  DEVEL = 'development',
+}
+
+const mode = process.env.MODE === WebpackMode.DEVEL ? WebpackMode.DEVEL : WebpackMode.PROD;
+const devtool = mode === WebpackMode.DEVEL ? 'source-map' : 'nosources-source-map';
+
+export const targetBrowser = process.env.TARGET_BROWSER as BrowserFamily || BrowserFamily.MOZILLA;
+
+const tsLoader: RuleSetUseItem = {
+  loader: 'ts-loader',
+  options: {
+    configFile: path.resolve(__dirname, 'tsconfig.json'),
+  },
+};
+
+export const commonConfiguration: Configuration = {
+  mode,
+  devtool,
+  stats: 'errors-only',
+  output: {
+    path: path.resolve(rootDir, 'dist', targetBrowser, 'src'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        include: srcDir,
+        use: [ MiniCssExtractPlugin.loader, 'css-loader' ],
+      },
+      {
+        test: /\.tsx?$/,
+        include: srcDir,
+        use: [ tsLoader ],
+      },
+      {
+        test: /\.json$/,
+        include: srcDir,
+        use: [ tsLoader ],
+      },
+      {
+        test: /\.png$/,
+        include: srcDir,
+        type: 'asset/inline', // base64 encoded
+      },
+      {
+        test: /\.svg$/,
+        include: srcDir,
+        type: 'asset/inline', // base64 encoded
+      },
+      {
+        test: /\.md$/,
+        include: rootDir,
+        type: 'asset/source', // as file content
+      },
+    ],
+  },
+  resolve: {
+    modules: [ path.resolve(rootDir, 'node_modules') ],
+    extensions: [ '.ts', '.tsx', '.js', '.jsx', '.css', '.json', '.png', '.svg', '.md' ],
+    alias: {
+      '@assets': path.resolve(srcDir, 'assets'),
+      '@background': path.resolve(srcDir, 'background'),
+      '@commons': path.resolve(srcDir, 'commons'),
+      '@frontend': path.resolve(srcDir, 'frontend'),
+    },
+  },
+};
+
+export default commonConfiguration;