wepback.config.js

const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const WebpackAssetsManifest = require('webpack-assets-manifest');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
const devMode = process.env.NODE_ENV !== 'production'

let webpackConfig = {
    entry: ['@babel/polyfill', path.resolve(__dirname, './resources/js/app.js')],
    output: {
        publicPath: "/assets/",
        path: path.join(__dirname, './assets/'),
        filename: 'build/[name].js',
        chunkFilename: '[id].js'
    },
    devtool: "source-map",
    externals: {
        jquery: 'jQuery',
        "gsap/TweenMax": 'TweenMax'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.pug$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'pug-loader'
                }
            },
            {
                test: /\.s?[ac]ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader", options: {
                            sourceMap: true,
                        }
                    }, 
                    {
                        loader: "sass-loader", options: {
                            sourceMap: true,
                        }
                    }
                ],
            },
            {
                test: /\.(gif|png|jpe?g)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            useRelativePath: true,
                        }
                    },
                ],
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts',
                    }
                }]
            }
        ]
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './resources/assets/js'),
        },
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "build/[name].css",
            sourceMap: true,
            chunkFilename: "[id].css"
        }),
        new WebpackAssetsManifest({
            publicPath: true,
            output: '../mix-manifest.json',
            customize(entry) {
                if (!entry.key.toLowerCase().endsWith('.js') && !entry.key.toLowerCase().endsWith('.css')) {
                    return false;
                }

                if (entry.key.toLowerCase().endsWith('.js')) {
                    return {
                        key: `/js/${entry.key}`
                    };
                }

                if (entry.key.toLowerCase().endsWith('.css')) {
                    return {
                        key: `/css/${entry.key}`
                    };
                }

            }
        }),
        new CleanWebpackPlugin(['build/*.*'], {
            root: path.join(__dirname, './assets/'),
            verbose: true
        }),
        new CleanObsoleteChunks({
            verbose: true,
            deep: true
        })
    ]
};

if (!devMode) {
    webpackConfig.devtool = "";
    webpackConfig = {
        ...webpackConfig,
        mode: 'production',
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    cache: true,
                    sourceMap: false,
                }),
                new OptimizeCSSAssetsPlugin({
                    cssProcessor: require('cssnano'),
                    cssProcessorOptions: {discardComments: {removeAll: true}},
                    canPrint: true
                })
            ]
        }
    }
}

module.exports = webpackConfig;