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
     *
     * Добавьте одну запись 1 для каждой "страницы" вашего приложения
     * (включая те, которые есть на каждой странице - например, "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);