Экспериментальные функции webpack

module.exports = {
    //...
    experiments: {
        //...
    }
}

module.exports = {
    //...
    experiments: {
        futureDefaults: true
    }
}

module.exports = {
    experiments: {
        asyncWebAssembly: true
    }
}

import React from 'https://esm.sh/react'

module.exports = {
    experiments: {
        buildHttp: {
            // разрешенные URL для загрузки
            allowedUris: (string|RegExp|(uri: string) => boolean)[];

            // местонахождение кэша с загруженными модулями на файловой системе
            // по умолчанию <compiler-name.>webpack.lock.data/
            // нужно добавить эту папку в систему контроля версии
            // так как в production сборке webpack не ходит в сеть
            cacheLocation?: false | string;

            // создает для https модулей lock файл (тот же механизм, что и yarn.lock или package-lock.json)
            // в случае несовпадения хэша генерирует ошибку
            // также нужно добавлять в систему контроля версии
            frozen?: boolean;

            // имя lock файла
            // по умолчанию <compiler-name.>webpack.lock
            lockfileLocation?: string;

            // проверяет обновление у зависимости и устанавливает его автоматически
            upgrade?: boolean;

            // позволяет указать proxy для запросов за зависимостями
            proxy?: string;
        }
    }
}

module.exports = {
    //...
    experiments: {
        css: true
    }
}

module.exports = {
    //...
    experiments: {
        css: {
            exportsOnly: true
        }
    }
}

module.export = {
    //...
    experiments: {
        cacheUnaffected: true
    },
    // также нужно включить опцию в настройках кэша
    cache: {
        // работает только для type memory
        type: 'memory',
        cacheUnaffected: true,
    },
}

module.exports = {
    mode: "development",
    entry: {
        main: "./example.js"
    },
    cache: {
        type: "filesystem",
        idleTimeout: 5000
    },
    experiments: {
        lazyCompilation: true
    },
    devServer: {
        hot: true,
        publicPath: "/dist/"
    },
    plugins: [new HotModuleReplacementPlugin()]
}

module.exports = {
    experiments: {
        lazyCompilation: {
            // выключает ленивую сборку для динамических импортов
            entries?: boolean,

            // выключает ленивую сборку для entry
            imports?: boolean,

            // выключает ленивую сборку для модулей по регулярному выражению
            test?: string | RegExp | ((module: Module) => boolean)
        }
    }
}

module.exports = {
    experiments: {
        lazyCompilation: {
            backend: {
                // путь до кастомного клиента (код который синхроинизирует ленивую сборку с клиентской страницей)
                // по умолчанию это https://github.com/webpack/webpack/blob/main/hot/lazy-compilation-web.js
                client?: string;
            
                // параметры запуска сервера (используется обычный модуль http/https createServer из node.js)
                listen?: number | ListenOptions | ((server: typeof Server) => void);

                // протокол для взаимодействия клиента с сервером
                protocol?: "http" | "https";

                // параметры создания сервера, отвечающего за ленивую сборку или сам инстанс сервера
                server?: ServerOptionsImport | ServerOptionsHttps | (() => typeof Server);
            }
        }
    }
}
Или вовсе использовать самописный бэкенд для сборки:
module.exports = {
    experiments: {
        lazyCompilation: {
            // функция самого webpack: https://github.com/webpack/webpack/blob/main/lib/hmr/lazyCompilationBackend.js
            backend: (compiler: Compiler, callback: (err?: Error, api?: BackendApi) => void) => void
        }
    }
}

module.exports = {
    experiments: {
        outputModule: true,
    },
};

module.exports = {
    //...
    experiments: {
        topLevelAwait: true
    }
}