webpack encore Виджет: как собрать вообще все один файл (в т.ч. без добавления хэша)

В сравнении с "обычной" сборкой энкора следует сделать следующее:

  1. Выключить сбор CSS в отдельный файл через вызов disableCssExtraction()
  2. Выключить сборку runtime.js в отдельный файл: для этого вместо enableSingleRuntimeChunk() используем disableSingleRuntimeChunk()
  3. Не вызывать метод splitEntryChunks() "разбивки" сборки не несколько файлов с целью оптимизации

В итоге настройка для виджета может выглядеть как-то так:

// ----------- Конфигурация для сборки Виджета
Encore
    .setOutputPath('public/widget/')
    .setPublicPath('/widget')
    .addEntry('rental', './assets/js/react-widget/react-widget.js')
    // .splitEntryChunks() // отменяем оптимизацию производительности через разделение на файлы
    .disableCssExtraction() // выключаем сборку CSS в отдельный файл!
    .disableSingleRuntimeChunk() // указываем не генерировать отдельный runtime.js, а включить все в олдин файл
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps()
    .enableVersioning(false) // выключаем добавление хэша для виджета!
    .configureBabel(babelConfigCallback, babelEncoreOptions)
    .enableSassLoader()
    .configureDefinePlugin(envPlugin)
    .enableReactPreset() // для работы с react.js
    .configureWatchOptions(configWatchOptionsCallback)
    .addAliases(pathAliases)
    ;

Key Words for FKN + antitotal forum (CS VSU):

vedro-compota's picture

Дока по методам включения/выключения отдельного runtime.js:

    /**
     * Tell Webpack to output a separate runtime.js file.
     *
     * This file must be included via a script tag before all
     * other JavaScript files output by Encore.
     *
     * The runtime.js file is useful when you plan to include
     * multiple entry files on the same page (e.g. a layout.js entry
     * and a page-specific entry). If you are *not* including
     * multiple entries on the same page, you can safely disable
     * this - disableSingleRuntimeChunk() - and remove the extra script tags.
     *
     * If you *do* include multiple entry files on the same page,
     * disabling the runtime.js file has two important consequences:
     *  A) Each entry file will contain the Webpack runtime, which
     *     means each contains some code that is duplicated in the other.
     *  B) If two entry files require the same module (e.g. jquery),
     *     they will receive *different* objects - not the *same* object.
     *     This can cause some confusion if you expect a "layout.js" entry
     *     to be able to "initialize" some jQuery plugins, because the
     *     jQuery required by the other entry will be a different instance,
     *     and so won't have the plugins initialized on it.
     *
     * @returns {Encore}
     */
    enableSingleRuntimeChunk() {
        webpackConfig.enableSingleRuntimeChunk();

        return this;
    }

    /**
     * Tell Webpack to *not* output a separate runtime.js file.
     *
     * See enableSingleRuntimeChunk() for more details.
     *
     * @returns {Encore}
     */
    disableSingleRuntimeChunk() {
        webpackConfig.disableSingleRuntimeChunk();

        return this;
    }

_____________
матфак вгу и остальная классика =)

vedro-compota's picture

    /**
     * Tell Webpack to "split" your entry chunks.
     *
     * This will mean that, instead of adding 1 script tag
     * to your page, your server-side code will need to read
     * the entrypoints.json file in the build directory to
     * determine the *multiple* .js (and .css) files that
     * should be included for each entry.
     *
     * This is a performance optimization, but requires extra
     * work (described above) to support this.
     *
     * @returns {Encore}
     */
    splitEntryChunks() {
        webpackConfig.splitEntryChunks();

        return this;
    }

_____________
матфак вгу и остальная классика =)