const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const AssetsPlugin = require('./index')

const pagesConfig = {
  main: {
    css: ['main.css'],
    js: ['main.js']
  },
  about: {
    css: ['about.css'],
    js: ['about.js']
  }
}
const htmlPlugins = []
const entry = {}

Object.keys(pagesConfig).forEach((key) => {
  const filename = key
  const page = pagesConfig[key]
  entry[key] = [path.resolve(__dirname, 'pages', filename, './main.js')]
  htmlPlugins.push(
    new HtmlWebpackPlugin({
      inject: 'body',
      filename: `pages/${filename}.html`,
      chunks: [filename]
    }),
    new AssetsPlugin({
      files: [`**/${filename}.html`],
      ...page
    })
  )
})

module.exports = {
  mode: 'development',
  entry,
  output: {
    path: path.resolve('dist'),
    filename: 'js/[name].js',
    publicPath: '/'
  },
  plugins: [...htmlPlugins]
}