const HtmlWebpackPlugin = require('html-webpack-plugin');

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

const path = require('path');

const webpack = require('webpack');

const { merge } = require('webpack-merge');

const common = require('./webpack.common');

module.exports = merge(common, {

mode: 'development',

devServer: {

contentBase: path.resolve(__dirname, 'dist'),

open: true,

clientLogLevel: 'silent',

port: 3000,

hot: true

},

plugins: [

new HtmlWebpackPlugin({

template: './public/index.html'

}),

new webpack.HotModuleReplacementPlugin(),

new MiniCssExtractPlugin({

filename: '[name].bundle.css',

chunkFilename: '[id].css'

}),

]

});