webpack.config.js

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

module.exports = env => {
    return {
        mode: env.mode,
        entry: {
            vendor: ['jquery', 'jquery-ui', 'jquery-validation', 'js-cookie', 'qtip2'],
            bundle: './src/scripts/bundle.js',
            global: './src/scripts/global.js',
            index: [
                './src/index.js',
                './src/scripts/branch.js'
            ],
            maincss: './src/scss/main.scss',
        },
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: '[name]-[hash].js',
            chunkFilename: '[name]-[chunkhash].js'
        },
        devtool: 'inline-source-map',
        devServer: {
            contentBase: './build'
        },
        plugins: [
            new CleanWebpackPlugin(['build']),
            new MiniCssExtractPlugin({
                path: 'build/Styles',
                filename: '[name]-[hash].css',
                chunkFilename: '[name]-[chunkhash].css'
            }),
            new HtmlWebpackPlugin({
                inject: false,
                title: "Home Page",
                filename: "home.html",
                chunks: ['vendor', 'bundle'],
                template: './src/templates/home.html'
            }),
            new HtmlWebpackPlugin({
                inject: false,
                title: "Branch Page",
                filename: "branch.html",
                chunks: ['vendor', 'bundle', 'branch'],
                template: './src/templates/branch.html'
            }),
            new HtmlWebpackPlugin({
                inject: false,
                filename: 'basket.html',
                template: 'src/basket.pug',
                chunks: ['vendor', 'bundle', 'maincss']
            })
        ],
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                name: 'Styles/[name]-[hash].css',
                            }
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                },
                {
                    test: /\.pug$/,
                    use: ['html-loader?attrs=false', 'pug-html-loader']
                },
            ]
        }
    }
}