const path = require("path");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
const svelte = path.resolve('node_modules', 'svelte');

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

module.exports = {
  resolve: {
    alias: {
      svelte
    },
    extensions: ['.svelte', '.ts', '.js', '.mjs'],
    mainFields: ['svelte', 'browser', 'module', 'main']
  },
  devtool: "source-map",
  node: {
		__dirname: false,
		__filename: false
	},
  module: {
    rules: [
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader-hot',
          options: {
            emitCss: false,
            preprocess: require('svelte-preprocess')({
              defaults: {
                script: 'typescript',
                style: 'stylus',
              },
            }),
            dev,
            hotReload: true,
            hotOptions: {
              // whether to preserve local state (i.e. any `let` variable) or
              // only public props (i.e. `export let ...`)
              noPreserveState: false,
              // optimistic will try to recover from runtime errors happening
              // during component init. This goes funky when your components are
              // not pure enough.
              optimistic: true,

              // See docs of svelte-loader-hot for all available options:
              //
              // https://github.com/rixo/svelte-loader-hot#usage
            },
          },
        }
      },
      {
        test: /\.css$/,
        use: ["css-loader"],
        options: {
          esModule: true
        }
      }
    ]
  },
  plugins: [
    new FriendlyErrorsWebpackPlugin({ clearConsole: true })
  ],
  devServer: {
    contentBase: 'dist',
    hot: true,
    overlay: true,
  },
};