webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const WorkboxPlugin = require('workbox-webpack-plugin');

//* Если переменная среды ровна 'development', то мы находимся в режиме разработки, а иначе - в режиме продакшн:
const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;
console.log(`\n========== РЕЖИМ: ${process.env.NODE_ENV && typeof(process.env.NODE_ENV) === 'string' ? process.env.NODE_ENV.toUpperCase() : process.env.NODE_ENV} ==========\n`);

const optimization = () => {
    const config = {
        splitChunks: {
            chunks: 'all'
        }
    };

    if (isProd) {
        config.minimizer = [
            new OptimizeCssAssetWebpackPlugin(),
            new TerserWebpackPlugin()
        ];
    }

    return config
};

function* generateNumber() {
    let i = 1;

    while (true) {
        yield i++;
    }
};

const generator = generateNumber();

const classesNames = {};

const getHeshForClassName = (localName) => {
    if (!classesNames[localName]) {
        classesNames[localName] = `${isDev ? `${localName}__` : ''}jss${generator.next().value}`;
    }
    
    return classesNames[localName]
};

const getFilename = (fileExtension) => {
    return isDev ? `[name].${fileExtension}` : `[name].[hash].${fileExtension}`
};

const cssLoaders = (cssLoader) => {
    const cssLoadersList = [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {},
        }, 
        {
            loader: "css-loader",
            options: {
                modules: { //* - Подробнее на сайте: "https://www.npmjs.com/package/css-loader/v/6.7.1".
                    //? localIdentName: "[path][name]__[local]--[hash:base64:5]",
                    namedExport: true,
                    exportLocalsConvention: "camelCaseOnly",
                    getLocalIdent: (context ,  localIdentName ,  localName ,  options) => `${getHeshForClassName(localName)}`
                },
            },
        },
        "postcss-loader"
    ];

    if (cssLoader) {
        cssLoadersList.push(cssLoader);
    }

    return cssLoadersList
};

const faviconsConfig = {
    // Your source logo (required)
    logo: './favicon/logo.png',
    // Your maskable source logo (optional)
    //? logoMaskable: './src/logo-maskable.png',
    mode: 'webapp', // optional can be 'webapp', 'light' or 'auto' - 'auto' by default
    devMode: 'webapp', // optional can be 'webapp' or 'light' - 'light' by default 
    // Allow caching the assets across webpack builds. By default this will use
    // webpack's cache configuration, but can be set to false to disable caching.
    // Note: disabling caching may increase build times considerably.
    // For more information, see: https://webpack.js.org/configuration/cache/
    cache: true,
    // Override the publicPath option usually read from webpack configuration
    //? publicPath: '/static',
    // The directory to output the assets relative to the webpack output dir.
    // Relative string paths are allowed here ie '../public/static'. If this
    // option is not set, `prefix` is used.
    //? outputPath: '/public/static',
    // Prefix path for generated assets
    prefix: 'assets/',
    // Inject html links/metadata (requires html-webpack-plugin).
    // This option accepts arguments of different types:
    //  * boolean
    //    `false`: disables injection
    //    `true`: enables injection if that is not disabled in html-webpack-plugin
    //  * function
    //    any predicate that takes an instance of html-webpack-plugin and returns either
    //    `true` or `false` to control the injection of html metadata for the html files
    //    generated by this instance.
    inject: true,

    // Favicons configuration options (see below)
    favicons: {
        //? path: "/", // Path for overriding default icons path. `string`
        appName: 'Findmards', // Your application's name. `string`
        appShortName: 'Findmards', // Your application's short_name. `string`. Optional. If not set, appName will be used
        appDescription: 'Игра для тренировки памяти', // Your application's description. `string`
        developerName: 'Беркуль Юрий Эдуардович', // Your (or your developer's) name. `string`
        developerURL: null, // Your (or your developer's) URL. `string`
        dir: "auto", // Primary text direction for name, short_name, and description
        lang: "ru-RU", // Primary language for name and short_name
        background: "#cccccc", // Background colour for flattened icons. `string`
        theme_color: "#cccccc", // Theme color user for example in Android's task switcher. `string`
        appleStatusBarStyle: "black-translucent", // Style for Apple status bar: "black-translucent", "default", "black". `string`
        display: "standalone", // Preferred display mode: "fullscreen", "standalone", "minimal-ui" or "browser". `string`
        orientation: "any", // Default orientation: "any", "natural", "portrait" or "landscape". `string`
        //? scope: "/", // set of URLs that the browser considers within your app
        //? start_url: "/?homescreen=1", // Start URL when launching the application from a device. `string`
        preferRelatedApplications: true, // Should the browser prompt the user to install the native companion app. `boolean`
        //? relatedApplications: undefined, // Information about the native companion apps. This will only be used if `preferRelatedApplications` is `true`. `Array<{ id: string, url: string, platform: string }>`
        version: "1.0", // Your application's version string. `string`
        //? pixel_art: false, // Keeps pixels "sharp" when scaling up, for pixel art.  Only supported in offline mode.
        loadManifestWithCredentials: false, // Browsers don't send cookies when fetching a manifest, enable this to fix that. `boolean`
        manifestMaskable: true, // Maskable source image(s) for manifest.json. "true" to use default source. More information at https://web.dev/maskable-icon/. `boolean`, `string`, `buffer` or array of `string`
        icons: {
            // Platform Options:
            // - offset - offset in percentage
            // - background:
            //   * false - use default
            //   * true - force use default, e.g. set background for Android icons
            //   * color - set background for the specified icons
            //
            android: true, // Create Android homescreen icon. `boolean` or `{ offset, background }` or an array of sources
            appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background }` or an array of sources
            appleStartup: true, // Create Apple startup images. `boolean` or `{ offset, background }` or an array of sources
            favicons: true, // Create regular favicons. `boolean` or `{ offset, background }` or an array of sources
            windows: true, // Create Windows 8 tile icons. `boolean` or `{ offset, background }` or an array of sources
            yandex: true, // Create Yandex browser icon. `boolean` or `{ offset, background }` or an array of sources
        },
        //? shortcuts: [
            // Your applications's Shortcuts (see: https://developer.mozilla.org/docs/Web/Manifest/shortcuts)
            // Array of shortcut objects:
        //     {
        //?         name: "View your Inbox", // The name of the shortcut. `string`
        //?         short_name: "inbox", // optionally, falls back to name. `string`
        //?         description: "View your inbox messages", // optionally, not used in any implemention yet. `string`
        //?         url: "/inbox", // The URL this shortcut should lead to. `string`
        //?         icon: "test/inbox_shortcut.png", // source image(s) for that shortcut. `string`, `buffer` or array of `string`
        //     },
            // more shortcuts objects
        // ],
    }
};

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: process.env.NODE_ENV,
    entry: {
        main: './js/main.js'
    },
    output: {
        filename: getFilename('js'),
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [
            '.js', 
            '.json',
        ],
    },
    optimization: optimization(),
    devServer: {
        port: 4200,
        hot: isDev
    },
    devtool: isDev ? 'source-map' : 'eval',
    plugins: [
        new HTMLWebpackPlugin({
            template: './index.html',
            minify: {
                collapseWhitespace: isProd
            }
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: getFilename('css')
        }),
        new FaviconsWebpackPlugin(faviconsConfig),
        new CopyPlugin({
            patterns: [
                {
                    from: '../public/**/*', 
                    to: '[name][ext]'
                },
            ],
        }),
        new WorkboxPlugin.GenerateSW({ //* Подробная информация о настройках плагина для service worker'а на сайте: "https://developer.chrome.com/docs/workbox/reference/workbox-build/#type-WebpackGenerateSWOptions".
            // these options encourage the ServiceWorkers to get in there fast
            // and not allow any straggling "old" SWs to hang around
            additionalManifestEntries: [], //* Список записей для предварительного кэширования в дополнение к любым записям, созданным как часть конфигурации сборки.
            dontCacheBustURLsMatching: /main/, //* Ресурсы, соответствующие этому, будут считаться имеющими уникальную версию по их URL-адресу и освобождены от обычной очистки кеша HTTP, которая выполняется при заполнении предварительного кеша. Хотя это и не требуется, рекомендуется, если ваш существующий процесс сборки уже вставляет значение [хэш] в каждое имя файла, вы предоставляете регулярное выражение, которое обнаружит это, поскольку это уменьшит пропускную способность, потребляемую при предварительном кэшировании.
            maximumFileSizeToCacheInBytes: 2097152, //* Это значение можно использовать для определения максимального размера файлов, которые будут предварительно кэшироваться. Это предотвращает непреднамеренное предварительное кэширование очень больших файлов, которые могли случайно соответствовать одному из ваших шаблонов.
            babelPresetEnvTargets: ["chrome >= 56"], //* Цели для передачи в babel-preset-env при транспиляции пакета сервис-воркеров.
            cleanupOutdatedCaches: true, //* Должен ли Workbox пытаться идентифицировать и удалять любые предварительные кэши, созданные более старыми несовместимыми версиями.
            clientsClaim: true, //* Должен ли сервисный работник начинать контролировать любых существующих клиентов, как только он активируется.
            disableDevLogs: isDev ? false : true, //* Отключить журналы разработки.
            mode: process.env.NODE_ENV, //* Режим.
            offlineGoogleAnalytics: false, //* Определяет, включать ли поддержку автономной Google Analytics. Если задано значение true, вызов метода initialize() workbox-google-analytics будет добавлен к сгенерированному сервис-воркеру. Если установлено значение Object, этот объект будет передан в вызов initialize(), что позволит вам настроить поведение.
            //? navigationPreload: true, //* Следует ли включать предварительную загрузку навигации в сгенерированном сервис-воркере. Если установлено значение true, вы также должны использовать runtimeCaching для настройки соответствующей стратегии ответа, которая будет соответствовать запросам навигации и использовать предварительно загруженный ответ.
            //? runtimeCaching: [{...}], //* При использовании инструментов сборки Workbox для создания сервисного работника вы можете указать одну или несколько конфигураций кэширования во время выполнения. Затем они преобразуются в вызовы workbox-routing.registerRoute с использованием заданной вами конфигурации сопоставления и обработчика.
            skipWaiting: true, //* Добавлять ли безусловный вызов skipWaiting() в сгенерированный сервис-воркер. Если false, вместо этого будет добавлен прослушиватель сообщений, позволяющий клиентским страницам запускать skipWaiting() путем вызова postMessage({type: 'SKIP_WAITING'}) для ожидающего работника службы.
            exclude: [/_redirects/, /vercel\.json/], //* Один или несколько спецификаторов, используемых для исключения ресурсов из манифеста предварительного кэширования. Это интерпретируется по тем же правилам, что и стандартная опция исключения webpack. Если не указано, значение по умолчанию — [/\.map$/, /^manifest.*\.js$].
            sourcemap: isDev ? true : false, //* Нужно ли создавать исходную карту для сгенерированных файлов сервис-воркеров.
        }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: cssLoaders(),
            },
            {
                test: /\.s[ac]ss$/i,
                use: cssLoaders('sass-loader'),
            },
            {
                test: /\.(png|jpeg|jpg|svg|gif)$/i,
                loader: 'file-loader',
                options: {
                    name: isDev ? '[path][name].[ext]' : '[path][contenthash].[ext]',
                },
            },
            {
                test: /\.m?js$/i,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ]
                    }
                }
            }
        ]
    }
}