webpack.config.mjs

import Encore from '@symfony/webpack-encore';

import {existsSync} from 'node:fs';
import {dirname,relative,resolve} from 'node:path';

import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .enableVersioning(Encore.isProduction())
    .configureWatchOptions((watchOptions) => {
        watchOptions.ignored = [
            '**/node_modules/**',
            '**/var/**',
            '**/public/build/**'
        ];
    })
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .addEntry('bewelcome', './assets/js/bewelcome.js')
    .addEntry('home', './assets/js/home.js')
    .addEntry('jquery_ui', './assets/js/jquery_ui.js')
    .addEntry('password/showhide', './assets/js/password/showhide.js')
    .addEntry('password/check', './assets/js/password/check.js')
    .addEntry('signup/finalize', './assets/js/signup/finalize.js')
    .addEntry('members/editmyprofile', './assets/js/editmyprofile.js')
    .addEntry('landing', './assets/js/landing/landing.js')
    .addEntry('search/loadpicker', './assets/js/search/loadpicker.js')
    .addEntry('search/loadcontent', './assets/js/search/loadajax.js')
    .addEntry('search/locations', './assets/js/search/locations.js')
    .addEntry('search/map', './assets/js/search/map.js')
    .addEntry('requests', './assets/js/requests.js')
    .addEntry('message', './assets/js/message.js')
    .addEntry('trips', './assets/js/trips.js')
    .addEntry('micromodal', './assets/js/micromodal.js')
    .addEntry('treasurer', './assets/js/treasurer.js')
    .addEntry('activities', './assets/js/activities/edit_create.js')
    .addEntry('leaflet', './assets/js/leaflet.js')
    .addEntry('member/autocomplete', './assets/js/member/autocomplete.js')
    .addEntry('admin/faqs', './assets/js/admin/faqs.js')
    .addEntry('chartjs', './node_modules/chart.js/dist/chart.js')
    .addEntry('offcanvas', './assets/js/offcanvas.js')
    .addEntry('profile/profile', './assets/js/profile/profile.js')
    .addEntry('profile/show', './assets/js/profile/show.js')
    .addEntry('profile/edit', './assets/js/profile/edit.js')
    .addEntry('profile/account', './assets/js/profile/account.js')
    .addEntry('profile/edit_languages', './assets/js/profile/edit_languages.js')
    .addEntry('profile/edit_accommodation', './assets/js/profile/edit_accommodation.js')
    .addEntry('profile/setlocation', './assets/js/profile/setlocation.js')
    .addEntry('profile/preference', './assets/js/profile/preference.js')
    .addEntry('signup/setlocation', './assets/js/signup/setlocation.js')
    .addEntry('updatecounters', './assets/js/updateCounters.js')
    .addEntry('lightbox', './assets/js/lightbox.js')
    .addEntry('gallery', './assets/js/gallery.js')
    .addEntry('notes_filter', './assets/js/notes/filter.js')
    .addEntry('conversations', './assets/js/conversations.js')
    .addEntry('report', './assets/js/conversations/report.js')
    .addEntry('bsfileselect', './assets/js/bsfileselect.js')
    .addEntry('scrollingtabs', './assets/js/scrollingtabs.js')
    .addEntry('email', './assets/scss/email.scss')
    .addEntry('roxeditor', './assets/js/roxeditor.js')
    .addEntry('highlight', './assets/js/highlight.js')
    .addEntry('block_highlight', './assets/js/block_highlight.js')
    .addEntry('faq', './assets/js/faq.js')
    .addEntry('translations', './assets/js/admin/translations.js')
    .addEntry('readmore', './assets/js/readmore.js')
    .addEntry('searchresults', './assets/js/searchresults.js')
    .addEntry('admin/tools/login_message', './assets/js/admin/tools/login_message.ts')
    .addEntry('tailwind', './assets/tailwindcss/tailwind.css')
    // react
    .configureBabel(function(babelConfig) {
        babelConfig.presets = [ "@babel/preset-env", '@babel/preset-react' ]
        babelConfig.plugins = [ '@babel/plugin-transform-runtime' ]
    })
    .addEntry('avatar', './assets/js/profile/avatar.js')
    .enableTypeScriptLoader()
    .enableSassLoader(options => {
        // Prefer using sass instead of node-sass to not depend on Python
        options.sassOptions = {
            // Suppress deprecation warnings from node_modules dependencies
            quietDeps: true,
            // Silence deprecations that require a major migration to fix
            // (Bootstrap 4 / Foundation @import → @use, and legacy color functions
            // in foundation-settings.scss used as a Foundation Emails config file)
            silenceDeprecations: ['import', 'global-builtin', 'color-functions'],
        };
    }, {
        resolveUrlLoader: true
    })
    .addAliases({
        'TweenLite': 'gsap/src/minified/TweenLite.min.js',
        'TweenMax': 'gsap/src/minified/TweenMax.min.js',
        'TimelineLite': 'gsap/src/minified/TimelineLite.min.js',
        'TimelineMax': 'gsap/src/minified/TimelineMax.min.js'
    })
    .enableSourceMaps(!Encore.isProduction())
    // Use raw-loader for CKEditor 5 SVG files.
    .configureCssLoader((config) => {
        config.url = {
            filter: (url, resourcePath) => {
                if (/^(data:|https?:)/.test(url)) return true;
                const resolved = resolve(dirname(resourcePath), url);
                if (!existsSync(resolved)) {
                    console.warn(`\x1b[33mWARNING\x1b[0m CSS url() not found, skipping: ${url} (in ${relative(__dirname, resourcePath)})`);
                    return false;
                }
                return true;
            },
        };
    })
    .enablePostCssLoader((options) => {
        // new option outlined here https://webpack.js.org/loaders/postcss-loader/
        options.postcssOptions = {
            config: './postcss.config.js',
        }
    })
    .configureBabel((config) => {
        config.plugins.push(['polyfill-corejs3', { method: 'usage-global', version: '3.49' }]);
    })
    .enableIntegrityHashes(Encore.isProduction())
;

const assetsConfig = Encore.getWebpackConfig();

import * as WorkboxPlugin from 'workbox-webpack-plugin';

const workboxConfig = {
        mode: 'production', /* Encore.isProduction() ? 'production' : 'development', */
        entry: {
            main: "./assets/js/index.js"
        },
        output: {
            filename: "[name].js",
            chunkFilename: "[name].bundle.js",
            path: resolve(__dirname, "public")
        },
        plugins: [
        new WorkboxPlugin.InjectManifest({
           // these options encourage the ServiceWorkers to get in there fast
           // and not allow any straggling "old" SWs to hang around
           // clientsClaim: true,
           // skipWaiting: true,
            swSrc: './assets/js/sw.js',
            swDest: './service-worker.js'
        }),
        ],
        devtool: "source-map"
};

export default [ assetsConfig, workboxConfig ];