1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

const Encore = require('@symfony/webpack-encore');

// Вручну сконфігуруйте операційне середовище, якщо воно ще не сконфігуроване командою "encore".
// Це корисно коли ви використовуєте інструменти, які покладаються на файл webpack.config.js.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // каталог, де будуть зберігатися скомпільовані ресурси
    .setOutputPath('public/build/')
    // публічний шлях, який використовується веб-сервером для доступу до шляху виведення
    .setPublicPath('/build')
    // необхідно лише для розгортання CDN або суб-каталогу
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Додайте один запис для кожної "сторінки" вашого додатку
     * (включно з тими, які є на кожній сторінці - наприклад, "app")
     *
     * Кожний запис стане в результаті одним файлом JavaScript (наприклад, app.js)
     * та одним файлом CSS (наприклад, app.css) якщо ваш JavaScript імпортує CSS.
     */
    .addEntry('app', './assets/app.js')
    //.addEntry('page1', './assets/page1.js')
    //.addEntry('page2', './assets/page2.js')

    // Якщо підключений, Webpack "розділяє" ваші файли на менші частини для більшої мінімізації.
    .splitEntryChunks()

    // буде вимагати додатковий тег скрипту для runtime.js
    // але, вам скоріш за все це не буде потрібно, хіба що ви не створюєте застосунок однієї сторінки
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Підключіть та сконфігуруйте інші функції нижче. Щоб побачити повний перелік
     * функцій, див.:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // вмикає хешовані імена файлів (наприклад, app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // вмикає полізаповнення @babel/preset-env
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // вмикає підтримку Sass/SCSS
    //.enableSassLoader()

    // розкоментуйте, якщо ви використовуєте TypeScript
    //.enableTypeScriptLoader()

    // розкоментуйте, щоб отримати атрибути integrity="..." вашого скрипту та тегів посилання
    // вимагає WebpackEncoreBundle 1.4 або новіше
    //.enableIntegrityHashes(Encore.isProduction())

    // розкоментуйте, якщо у вас є проблеми з плагіном jQuery
    //.autoProvidejQuery()

    // розкоментуйте, якщо ви використовуєте API Platform Admin (композитор вимагає api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/admin.js')
;

module.exports = Encore.getWebpackConfig();

1
2
3
4
5
6
7
8
9
10
11
12
13

// assets/app.js
/*
 * Вітаємо в головному файлі JavaScript вашого додатку!
 *
 * Ми рекомендуємо додавати вбудовану версію цього файлу JavaScript
 * (та його CSS-файл) у ваш базовий макет (base.html.twig).
 */

// будь-який CSS, який ви імпортуєте, буде виводитися в один css-файл (в цьому випадку - app.css)
import './styles/app.css';

// запустити додаток Stimulus
import './bootstrap';

1
2
3
4
5
6
7
8
9
10
11
12

// assets/bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bridge';

// Реєструє контролери Stimulus з controllers.json та у каталозі controllers/
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.(j|t)sx?$/
));

// зареєструвати будь-які користувацькі сторонні контролери тут
// app.register('some_controller_name', SomeImportedController);