Опції dev-server

Команда dev-server підтримує всі опції, визначені webpack-dev-server. Ви можете встановити ці опції через командну строку опцій:

1

$ npm run dev-server -- --port 9000

Ви також можете встановити ці опції використовуючи метод Encore.configureDevServerOptions() у вашому файлі webpack.config.js:

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

// webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.server = {
            type: 'https',
            options: {
                key: '/path/to/server.key',
                cert: '/path/to/server.crt',
            }
        }
    })
;

Ввімкнення HTTPS з використанням веб-серверу Symfony

Якщо ви використовуєте веб-сервер Symfony локально з HTTPS, вам необхідно буде також повідомити dev-серверу використовувати HTTPS. Щоб зробити це, ви можете знов використати сертифікат веб-серверу Symfony:

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

// webpack.config.js
  // ...
+ const path = require('path');

  Encore
      // ...

+     .configureDevServerOptions(options => {
+         options.server = {
+             type: 'https',
+             options: {
+                 pfx: path.join(process.env.HOME, '.symfony5/certs/default.p12'),
+             }
+         }
+     })

Проблеми CORS

Якщо ви стикаєтеся з проблемами, пов'язаними з CORS (Сумісне використання ресурсів між різними джерелами), встановіть наступну опцію:

1
2
3
4
5
6
7
8
9
10
11

// webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.allowedHosts = 'all';
        // в більш старих версіях Webpack Dev Server, замість цього використайте цю опцію:
        // options.firewall = false;
    })

Пам'ятайте, що в загальній практиці безпеки це не рекомендується, але тут це обов'язково для вирішення проблеми CORS.

Заміна гарячого модуля HMR

Заміна гарячого модуля - це суперсила dev-server, де стилі і (в деяких випадках) JavaScript можуть автоматично оновлюватися без необхідності перезавантаження сторінки. HMR автоматично працює з CSS (якщо ви використовуєте `dev-server`` та Encore 1.0 або новіше), але при цьому працює лише з деякими JavaScript (на кшталт Vue.js).

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

// webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.liveReload = true;
        options.static = {
            watch: false
        };
        options.watchFiles = {
            paths: ['src/**/*.php', 'templates/**/*'],
        };
    })