import { resolve } from 'path'
import { Configuration } from 'webpack'

// this automatically creates entry files
// import()

export const config: Configuration = {
  mode: 'development',

  entry: {
    'index': 'src/index.tsx',
  },
  output: {
    // dist/bundled/client/index-2384y4h.js
    // dist/bundled/client/Home-2384y4h.js
    path: 'dist/bundled/client/[name]-[hash].js',
    // path: (args) => `dist/bundled/client/${args.name}-${args.hash}.js`,
  },
  plugins: [
    // these can hook into specific events that happen in webpack
  ],
  module: {
    rules: [
      // these are used to load different types of files
    ],
  },

  resolve: {
    alias: {
      'src': resolve(process.cwd(), './src'),
    },
    // these are the package.json field to follow
    mainFields: ['main'],
  },
  target: 'web',
  devtool: 'cheap-eval-source-map',
  externals: {
    fs: '',
  },
}

const WebpackDevServer = require('webpack-dev-server')
const { createCompiler } = require('webpack')
const createDevServerConfig = require('./webpackDevServer.config')

const compiler = createCompiler(config)
const serverConfig = createDevServerConfig()
const devServer = new WebpackDevServer(compiler, serverConfig)
devServer.listen(3000, 'localhost')