const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: ['./src/index.js'],
  mode: "production",
  target: "web",
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      }
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve("src", "index.html"),
    templateParameters: {
      'favicon': '/assets/logo.png',
      'manifest': '/assets/manifest.json'
  },
  }), new MiniCssExtractPlugin(),new CopyPlugin({
    patterns: [
        { from: "src/assets", to: "assets" }
    ],
})],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].d3v4pp.bundle.js',
    publicPath: "/"

  },
  devServer: {
    client: {
      progress: true,
      reconnect: true,
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    historyApiFallback: true,
    open: true,
    static: {
      directory: path.join(__dirname, 'src'),
    },
    compress: true,
    port: 9000
  }
};