webpack.config.js

require('dotenv').config()
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

const path = require('path');
const isDevelopment = process.env.NODE_ENV === "development";
/*
const shopBaseConfig = require('./config/appsettings.json')
const currentShopNumber = process.env.SHOPNUMBER
const currentShop = shopBaseConfig.Shops.filter(shop => shop.id === parseInt(currentShopNumber))[0]

const aliases = {
    '~': path.resolve(__dirname, 'Resources/js'),
    '~base': path.resolve(__dirname, 'Resources/js/base'),
}
shopBaseConfig.Shops.forEach(shop => {
    Object.assign(aliases, {[`~${shop.abbr}`]: path.resolve(__dirname, `Resources/js/${shop.abbr}`)})
})*/

module.exports = {
    mode: isDevelopment ? "development" : "production",
    entry: {
        'app': path.resolve(__dirname, `Resources/js/app.js`),
        'style' : path.resolve(__dirname, `Resources/css/app.scss`)
    },
    stats: {
        "hash": false,
        "version": false,
        "timings": false,
        "children": false,
        "errorDetails": false,
        "entrypoints": false,
        "performance": false,
        "chunks": false,
        "modules": false,
        "reasons": false,
        "publicPath": false,
        "builtAt": false
    },
    performance: {
        "hints": false
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[name].js',
        path: path.resolve(__dirname, 'assets/build'),
        publicPath: path.resolve(__dirname, 'assets/build')
    },
    externals: {
        jquery: 'jQuery',
        "gsap/TweenMax": 'TweenMax'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: isDevelopment,
                        },
                    },
                    {
                        loader: 'css-loader', options: {
                            sourceMap: isDevelopment,
                            importLoaders: 2
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: isDevelopment
                        }
                    },
                    {
                        loader: 'sass-loader', options: {
                            sourceMap: isDevelopment,
                            outputStyle: 'expanded',
                            implementation: require("sass")
                        }
                    }
                ],
            },
            {
                test: /\.(woff|woff2|ttf|eot|svg|jpg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'app.css',
            chunkFilename: 'app.css',
        }),
        new FriendlyErrorsWebpackPlugin(),
        new FixStyleOnlyEntriesPlugin(),
        new CleanWebpackPlugin({verbose: true}),
        isDevelopment ? new webpack.SourceMapDevToolPlugin({
            exclude: [
                'vendor.js',
                'manifest.js'
            ]
        }) : () => {},
        new BrowserSyncPlugin({
            open: false,
            proxy: 'http://localhost:5001',
            injectChanges: true,
            files: [
                "assets/build/*.css",
                "assets/build/*.js",
            ]
        },{
            reload: false
        }),
    ],
    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true,
                cache: true,
                sourceMap: isDevelopment,
                terserOptions: {
                    warnings: false,
                    ie8: false,
                    safari10: false,
                    compress: {
                        drop_console: true,
                    },
                    output: {
                        comments: false,
                    }
                }
            })
        ],
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "initial",
                },
            }
        },
        runtimeChunk: {
            name: "manifest",
        }
    }
};