text: const HtmlWebpackPlugin = require("html-webpack-plugin");
  const CopyWebpackPlugin = require("copy-webpack-plugin");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const webpack = require("webpack"); //to access built-in plugins
  var path = require("path");
  
  const config = {
    entry: ["./src/js/App.ts"],
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "dist"),
    },
    resolve: {
      extensions: [".ts", ".js"],
    },
    externals: {
      jquery: "jQuery",
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "ts-loader",
            },
          ],
          include: [path.resolve(__dirname, "src/js")],
        },
        {
          test: /\.(jpe?g|png|gif)$/i,
          loader: "file-loader",
          options: {
            outputPath: "img/",
          },
        },
        {
          test: /\.css$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                publicPath: "",
              },
            },
            {
              loader: "css-loader",
            },
          ],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({ template: "./src/index.html" }),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name].css",
        chunkFilename: "[id].css",
      }),
      new CopyWebpackPlugin([
        {
          from: "./src/img",
          to: "./img",
        },
      ]),
    ],
  };
  
  module.exports = config;
  