webpack.config.js

// Global imports
const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

// Paths
const entry = './src/js/app.js';
const includePath = path.join(__dirname, 'src/js');
const nodeModulesPath = path.join(__dirname, 'node_modules');

let outputPath = path.join(__dirname, 'src/public/js');

module.exports = (env) => {
    // Dev environment
    let devtool = 'eval';
    let mode = 'development';
    let stats = 'minimal';
    let plugins = [
        new webpack.DefinePlugin({
            __ENV__: JSON.stringify(env.NODE_ENV)
        })
    ];

    // Prod environment
    if (env.NODE_ENV === 'prod') {
        devtool = 'hidden-source-map';
        mode = 'production';
        stats = 'none';
        outputPath = `${__dirname}/build/js`;
    }

    console.log('Webpack build -');
    console.log(`    - ENV: ${env.NODE_ENV}`);
    console.log(`    - outputPath  ${outputPath}`);
    console.log(`    - includePath ${includePath}`);
    console.log(`    - nodeModulesPath: ${nodeModulesPath}`);

    return {
        // Here the application starts executing
        // and webpack starts bundling
        entry: [entry],

        // options related to how webpack emits results
        output: {
            // the target directory for all output files
            // must be an absolute path (use the Node.js path module)
            path: outputPath,
            // the url to the output directory resolved relative to the HTML page
            publicPath: 'js',
            // the filename template for entry chunks
            filename: 'app.js'
        },

        // Webpack 4 mode helper
        mode,

        // configuration regarding modules
        module: {
            // rules for modules (configure loaders, parser options, etc.)

            rules: [
                {
                    test: /\.js$/,
                    enforce: 'pre',
                    use: ['source-map-loader']
                }
            ],

            rules: [
                {
                    // these are matching conditions, each accepting a regular expression or string
                    // test and include have the same behavior, both must be matched
                    // exclude must not be matched (takes preference over test and include)
                    // Best practices:
                    // - Use RegExp only in test and for filename matching
                    // - Use arrays of absolute paths in include and exclude
                    // - Try to avoid exclude and prefer include
                    test: /\.js?$/,
                    // the loader which should be applied, it'll be resolved relative to the context
                    // -loader suffix is no longer optional in webpack2 for clarity reasons
                    // see webpack 1 upgrade guide
                    use: {
                        loader: 'babel-loader'
                    },
                    include: includePath,
                    exclude: nodeModulesPath
                },
                {
                    test: /\.(s*)css$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                // you can specify a publicPath here
                                // by default it use publicPath in webpackOptions.output
                                publicPath: 'css'
                            }
                        },
                        'css-loader',
                        'postcss-loader',
                        'sass-loader'
                    ]
                }
            ]
        },

        // options for resolving module requests
        // (does not apply to resolving to loaders)
        resolve: {
            // directories where to look for modules,
            modules: ['node_modules', path.resolve(__dirname, 'src')],

            // extensions that are used
            extensions: ['.js', '.json']
        },

        performance: {
            hints: 'warning'
        },

        // lets you precisely control what bundle information gets displayed
        stats,
        // enhance debugging by adding meta info for the browser devtools
        // source-map most detailed at the expense of build speed.
        devtool,

        devServer: {
            contentBase: 'src/public'
        },

        plugins: plugins.concat(
            new HtmlWebpackPlugin({
                title: 'Three.js Webpack ES6 Boilerplate',
                template: path.join(__dirname, 'src/html/index.html'),
                filename: '../index.html',
                env: env.NODE_ENV
            }),
            new MiniCssExtractPlugin({
                filename: '../css/[name].css',
                chunkFilename: '../css/[id].css'
            }),
            new CopyPlugin({
                patterns: [
                    { from: 'node_modules/three/examples/js/libs/stats.min.js' },
                    { from: 'node_modules/three/examples/js/libs/dat.gui.min.js' },
                    { from: 'src/public/assets/favicon.ico', to: '../favicon.ico' }
                ]
            })
        ),

        optimization: {
            minimizer: [
                new TerserPlugin({
                    cache: true,
                    parallel: true,
                    sourceMap: true // set to true if you want JS source maps
                }),
                new OptimizeCSSAssetsPlugin({})
            ],
            runtimeChunk: 'single',
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /[\\\/]node_modules[\\\/]/,
                        name: 'vendors',
                        chunks: 'all'
                    },
                    styles: {
                        name: 'styles',
                        test: /\.css$/,
                        chunks: 'all',
                        enforce: true
                    }
                }
            }
        }
    };
};