webpack encore Виджет: как собрать вообще все один файл (в т.ч. без добавления хэша)
Primary tabs
В сравнении с "обычной" сборкой энкора следует сделать следующее:
- Выключить сбор CSS в отдельный файл через вызов disableCssExtraction()
- Выключить сборку runtime.js в отдельный файл: для этого вместо enableSingleRuntimeChunk() используем disableSingleRuntimeChunk()
- Не вызывать метод 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)
;
- Log in to post comments
- 3187 reads
vedro-compota
Tue, 12/01/2020 - 12:41
Permalink
enableSingleRuntimeChunk() и disbleSingleRuntimeChunk()
Дока по методам включения/выключения отдельного 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
Tue, 12/01/2020 - 12:44
Permalink
splitEntryChunks()
/** * 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; }_____________
матфак вгу и остальная классика =)