webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = () => {
    return {
        devServer: {
            static: {
            directory: path.join(__dirname, 'public'),
            },
            compress: true,
            port: 9000,
        },
        mode: 'development',
        entry: './src/js/index.js',
        output: {
            filename: 'main.[contenthash].js',
            path: path.resolve(__dirname, 'dist'),
            clean: true
        },
        plugins: [
            new CopyPlugin({
                patterns: [
                    { from: "./src/assets", to: "assets" },
                ],
            }),
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: './src/index.html',
                inject: 'body',
            }),
            new MiniCssExtractPlugin({
                filename: "[name].[contenthash].css",
            })
        ],
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader",
                        {
                            loader: "sass-loader",
                            options: {
                            implementation: require.resolve("sass"),
                            },
                        },
                    ]
                }
            ]
        }
    }
};