const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = {
  entry: {
    'manju-web': ['./src/main.js'],
  },
  output: {
    path: path.resolve(__dirname, 'public/manju-web'),
    filename: '[name].js',
    chunkFilename: '[name].[id].js'
  },
  resolve: {
    alias: {
      svelte: path.resolve('node_modules', 'svelte'),
    },
    extensions: ['.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser', 'module', 'main'],
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: { loader: 'svelte-loader', options: { emitCss: true, hotReload: true } },
      },
      {
        test: /\.css$/,
        // MiniCssExtractPlugin doesn't support.
        // For developing, use style-loader instead.
        use: [prod ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              '@babel/plugin-transform-arrow-functions',
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-transform-runtime',
            ],
            presets: [
              '@babel/preset-env',
            ]
          },
        }
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].css' }),
  ],
  mode,
  devtool: prod ? false : 'source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    publicPath: '/manju-web/',
    hot: false,
    liveReload: true,
    watchContentBase: true,
  },
};