Создание CSS/JS, присущих странице

Если вы создаёте приложение одной страницы (ПОС), то вам скорее всего нужно определить только одну запись в webpack.config.js. Но если у вас множество страниц, то вы можете захотеть использовать CSS и JavaScript, присущих странице.

Например, представьте, что у вас есть страница оформления заказа, которая имеет собственный JavaScript. Создайте новую запись checkout:

        1
2
3
4
5
6
7
8
9
10
        // webpack.config.js

Encore
    // существующая запись
    .addEntry('app', './assets/js/main.js')
    // запись глобального стиля
    .addStyleEntry('global', './assets/css/global.scss')

+     .addEntry('checkout', './assets/js/checkout.js')
;
    

Внутри checkout.js, добавьте или потребуйте необходимый вам JavaScript и CSS. Потом, просто включите тег script для checkout.js в страницу оформления заказа (и тег link для checkout.css, если вы импортируете CSS).

Несколько записей для страницы?

Обычно, вам нужно добавлять только одну JavaScript запись на страницу. Это означает, что страница оформления заказа будет включать в себя checkout.js, но не будет включать app.js, который используется на других страницах. Думайте о странице оформления заказа, как о собственном "приложении", где checkout.js содержит всю необходимую вам функциональность.

Однако, если существует некоторый глобальный JavaScript, который вы хотите включить в каждую страницу, то вы можете создать запись, содержащую этот код и включить как эту запись, так и запись, присущую странице. Например, представьте, что запись app выше, содержит JavaScript, который вы хотите на каждой странице. В этом случае, добавьте на страницу оформления как app.js, так и checkout.js.

Tip

Не забудьте создать общую запись, чтобы избежать дублирования логики начальной загрузки Webpack и любых общих модулей.