const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const nodeEnv = process.env.NODE_ENV || "development";
const surgeBuild = process.env.SURGE_BUILD;
const devMode = nodeEnv === "development";

const config = {
  mode: nodeEnv,

  entry: {
    content: path.join(__dirname, "src/content/lib.js"),
  },

  devtool: devMode ? "cheap-module-eval-source-map" : undefined,
  devServer: {
    port: 8080,
    historyApiFallback: true,
    open: true,
    overlay: true,
    hot: true,
  },

  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dist-lib/"),
    publicPath: "",
  },

  plugins: [
    new MiniCssExtractPlugin(),
    new VueLoaderPlugin(),
    new CompressionPlugin({
      test: /\.(js|css)$/,
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "demo", "index.html"),
      inject: true,
      minify: devMode
        ? false
        : {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true,
          },
    }),
  ],

  module: {
    rules: [
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
      {
        test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf|otf|svg)$/i,
        use: ["file-loader"],
      },
      { test: /\.vue$/, use: ["vue-loader"] },
    ],
  },

  resolve: {
    alias: {
      vue$: "vue/dist/vue",
    },
  },
};

if (devMode) {
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
} else if (surgeBuild) {
  // Building for Surge: do not use the version number but a hash to prevent cache issues
  config.output.filename = "keyboard-[hash].js";
  config.output.chunkFilename = "keyboard-[name]-[hash].js";
}

module.exports = config;