Опции 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-server использовать HTTPS. Чтобы сделать это, вы можете снова использовать SSL сертификат веб-сервера 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/**/*'],
        };
    })