const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { HotModuleReplacementPlugin } = require('webpack');

const { NODE_ENV } = process.env;
const isDevMode = NODE_ENV === 'development';

const basePlugins = [
  new CleanWebpackPlugin(),
  new CopyWebpackPlugin([
    { from: './src' },
    { from: './package.json' },
    { from: './README.md' },
  ]),
  new ExtractCssChunks({
    filename: `index.css`,
  }),
];
const devPlugins = basePlugins.concat([
  new HtmlWebPackPlugin({ template: './test/index.html' }),
  new HotModuleReplacementPlugin(),
]);

module.exports = {
  mode: isDevMode ? 'development' : 'production',
  entry: isDevMode
    ? './test/index.js'
    : ['@babel/polyfill', path.resolve(__dirname, 'src'), path.resolve(__dirname, 'index.css')],
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
  },
  devtool: isDevMode ? 'inline-source-map' : false,
  devServer: {
    contentBase: './build',
    hot: true,
  },
  plugins: isDevMode ? devPlugins : basePlugins,
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          { loader: ExtractCssChunks.loader, options: { hot: true, reloadAll: true } },
          { loader: 'css-loader', options: { modules: false, importLoaders: 1, url: false, sourceMap: isDevMode } },
          { loader: 'postcss-loader', options: { sourceMap: isDevMode } },
        ],
      },
      {
        test: /\.svg$/,
        include: [path.resolve(__dirname, './node_modules/@doodle/'), path.resolve(__dirname, './src')],
        loader: 'svg-react-loader',
      },
    ],
  },
};