Homepage/webpack.config.js

const path = require('path')

const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = (env, argv) => {
    const isProduction = argv.mode === 'production'

    console.log(`Using mode ${isProduction ? 'PRODUCTION' : 'DEVELOPMENT'}`)

    return {
        context: path.resolve(__dirname, 'src'),

        devServer: {
            contentBase: path.resolve(__dirname, 'dist'),
            port: 3100,
        },

        devtool: 'inline-source-map',

        mode: isProduction ? 'production' : 'development',

        entry: {
            index: './index.js',
        },

        module: {
            rules: [
                {
                    test: /\.(jpg|png|svg)$/,
                    include: [
                        path.resolve(__dirname, 'src')
                    ],
                    use: [
                        isProduction ?
                            'file-loader?name=[path][name].[contenthash:8].[ext]' :
                            'file-loader?name=[path][name].[ext]'
                    ],
                },
                {
                    test: /\.(eot|svg|ttf|woff2?)$/,
                    include: [
                        path.resolve(__dirname, 'node_modules')
                    ],
                    use: [
                        isProduction ?
                            'file-loader?name=assets/webfonts/[name].[contenthash:8].[ext]' :
                            'file-loader?name=assets/webfonts/[name].[ext]'
                    ],
                },
                {
                    test: /\.(html)$/,
                    use: [
                        'file-loader?name=[name].[ext]',
                        'extract-loader',
                        'html-loader?interpolate',
                    ],
                },
                {
                    test: /\.(c|sa|sc)ss$/,
                    use: [
                        isProduction ?
                            'file-loader?name=[name].[contenthash:8].css' :
                            'file-loader?name=[name].css',
                        'extract-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                            },
                        },
                        'sass-loader',
                    ],
                },
            ],
        },

        output: {
            filename: '[name].[contenthash:8].js',
            path: path.resolve(__dirname, 'dist'),
        },

        plugins: Array.prototype.concat([
            new CleanWebpackPlugin(),
        ], isProduction
            ? []
            : [
                new BrowserSyncPlugin({
                    host: 'localhost',
                    open: false,
                    proxy: 'http://localhost:3100/',
                }),
            ])
    }
}