gamesshop/webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin'),
    Path = require('path'),
    AssetsPlugin = require('assets-webpack-plugin'),
    CopyPlugin = require('copy-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const PUBLIC_FOLDER = Path.resolve(__dirname, 'public'),
    SOURCE_FOLDER = Path.resolve(__dirname, 'src'),
    JS_FOLDER = Path.resolve(SOURCE_FOLDER, 'js'),
    CSS_FOLDER = Path.resolve(SOURCE_FOLDER, 'css'),
    PHP_FOLDER = Path.resolve(SOURCE_FOLDER, 'php');

const PROD = process.env.PROD ?? false;

const INDEX_PATH = Path.resolve(PHP_FOLDER, 'index.php');

module.exports = {
    plugins: [
        new AssetsPlugin({
            filename: 'file-index.json',
            path: SOURCE_FOLDER,
            includeAllFileTypes: false,
            entrypoints: true,
            removeFullPathAutoPrefix: true
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: INDEX_PATH,
                    to: PUBLIC_FOLDER + '/index.php'
                },
            ]
        })
    ],
    mode: PROD ? 'production' : 'development',
    devtool: 'source-map',
    optimization: {
        runtimeChunk: "single",
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin()
        ],
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
                common: {
                    test: /[\\/]common[\\/]/,
                    name: 'common',
                    chunks: 'all'
                }
            },
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ],
            },
            {
                test: /\.scss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'resolve-url-loader',
                    "sass-loader"
                ]
            },
            {
                test: /\.ts$/i,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|gif|svg)$/i,
                type: 'asset/resource',
            }
        ],
    },
    resolve: {
        extensions: ['.js', '.ts'],
        fallback: {
            'bootstrap5-autocomplete/types/autocomplete': 'bootstrap5-autocomplete'
        }
    },
    entry: {
        index: JS_FOLDER + "/pages/index",
        'admin/accounts': JS_FOLDER + "/pages/admin/accounts",
        keys: JS_FOLDER + "/pages/keys/index",
    },
    output: {
        path: PUBLIC_FOLDER,
        filename: 'js/[name].js'
    }
}