clash-and-dashboard/configs/webpack/dev.js

// development config
const merge = require('webpack-merge')
const webpack = require('webpack')
const { resolve } = require('path')
const ManifestPlugin = require('webpack-pwa-manifest')
const commonConfig = require('./common')

module.exports = merge(commonConfig, {
    mode: 'development',
    entry: [
        'react-hot-loader/patch', // activate HMR for React
        'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint
        'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
        './index.ts', // the entry point of our app
    ],
    devServer: {
        hot: true, // enable HMR on the server
        noInfo: true,
    },
    devtool: 'cheap-module-eval-source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // enable HMR globally
        new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
        new ManifestPlugin({
            name: 'Clash Development',
            background_color: '#FFFFFF',
            crossorigin: 'anonymous',
            inject: true,
            fingerprints: false,
            icons: [
                {
                    src: resolve('src/assets/Icon.png'),
                    sizes: [96, 128, 192, 256],
                    destination: 'img/icons',
                },
            ],
        }),
    ],
})