webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractCssChunks = require("extract-css-chunks-webpack-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')
const autoprefixer = require('autoprefixer')
const fs = require('fs')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const isDevelopment = process.env.NODE_ENV !== 'production'

function generateHtmlPlugins (templateDir) {
    // Read files in template directory
    const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir))
    return templateFiles.map(item => {
        // Split names and extension
        const parts = item.split('.')
        const name = parts[0]
        const extension = parts[1]
        // Create new HTMLWebpackPlugin with options
        return new HtmlWebpackPlugin({
            filename: `${name}.html`,
            template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
            minify: !isDevelopment && {
                html5: true,
                collapseWhitespace: false,
                caseSensitive: false,
                removeComments: false,
                removeEmptyElements: false,
            },
        })
    })
}

// Call our function on our views directory.
const htmlPlugins = generateHtmlPlugins('./pages')


module.exports = {
    mode: 'development',
    entry: {
        bundle: './src/js/app.js',
    },
    stats: {
        children: false,
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: './src/bundle.js' // JS output path
    },
    devtool: isDevelopment && 'source-map',
    devServer: {
        host: '0.0.0.0',
        port: 8000,
        open: false,
        contentBase: path.join(__dirname, '.'),
    },
    watchOptions: {
    	poll: true,
    	ignored: '/node_modules/',
	},
    module: {
        rules: [
            {
                test: /\.hbs/,
                loader: 'handlebars-loader',
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.(scss|css)$/,
                use: [ExtractCssChunks.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            modules: true,
                            minimize: true
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            autoprefixer: {
                                browsers: ["last 2 versions"]
                            },
                            plugins: () => [
                                autoprefixer
                            ]
                        },
                    },
                    {
                        loader: "sass-loader",
                        options: {}
                    }
                ],

            },
            {
                test: /\.(jpg|png|gif)$/,
                include: path.resolve('./img/'),
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'dist/img/',
                            name: 'img/[name].[ext]',
                            publicPath: '/'
                        },
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65,
                            },
                            optipng: {
                                enabled: true,
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4,
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            webp: {
                                quality: 75,
                            },
                        },
                    },
                ],
            },
            {
                test: /\.(ttf|eot|woff|woff2|svg)$/,
                loader: 'file-loader',
                include: path.resolve('./src/fonts/'),
                options: {
                    outputPath: 'dist/fonts/',
                    name: '[name].[ext]',
                    publicPath: '/'
                }
            },

        ],
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                handlebarsLoader: {},
            },
        }),
        new ExtractCssChunks({
            filename: '[name].css',
            chunkFilename: '[id].css',
            hot: true
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new CopyWebpackPlugin([
            {from:'./src/img',to:'img'}
        ]),
        new BrowserSyncPlugin({
            // browse to http://localhost:3000/ during development,
            // ./public directory is being served
            host: '0.0.0.0',
            port: 8000,
            files: ['./pages/*.hbs'],
            server: { baseDir: ['src/dist'] }
        })


    ]
    .concat(htmlPlugins)
}