text: const path = require("path");
  
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  
  module.exports = {
      mode: process.env.MODE ?? "development",
  
      // Enable sourcemaps for debugging webpack's output.
      devtool: "source-map",
  
      resolve: {
          // Add '.ts' and '.tsx' as resolvable extensions.
          extensions: [".ts", ".tsx", ".js", ".scss", ".css"]
      },
  
      devServer: {
          host: "0.0.0.0",
          port: "7000",
          hot: true,
          historyApiFallback: true,
      },
  
      output: {
          publicPath: "/js/popup/dist/",
      },
  
      module: {
          rules: [{
                  test: /\.ts(x?)$/,
                  exclude: /node_modules/,
                  use: [{
                      loader: "ts-loader"
                  }]
              },
              // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
              {
                  enforce: "pre",
                  test: /\.js$/,
                  loader: "source-map-loader"
              },
              {
                  test: /\.s[ac]ss$/i,
                  use: [
                      'style-loader',
                      'css-loader',
                      'sass-loader',
                  ]
              },
              {
                  test: /\.css$/i,
                  use: [
                      'style-loader',
                      'css-loader',
                  ]
              },
              {
                  test: /\.png$/i,
                  use: [
                      'file-loader'
                  ],
              },
              {
                  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                  use: [{
                      loader: 'file-loader',
                      options: {
                          name: '[name].[ext]',
                          outputPath: 'fonts/'
                      }
                  }]
              }
          ]
      },
      plugins: [
          new HtmlWebpackPlugin({
              template: path.resolve(__dirname, "./index.html")
          }),
      ],
  
      // When importing a module whose path matches one of the following, just
      // assume a corresponding global variable exists and use that instead.
      // This is important because it allows us to avoid bundling all of our
      // dependencies, which allows browsers to cache those libraries between builds.
      // externals: {
      //     "react": "React",
      //     "react-dom": "ReactDOM",
      //     "React": "React",
      // },
  };