Using webpack-dev-server and HMR

While developing, instead of using yarn encore dev --watch, you can use the webpack-dev-server:

1
2
3
4
5

# if you use the Yarn package manager
$ yarn encore dev-server

# if you use the npm package manager
$ npm run dev-server

This builds and serves the front-end assets from a new server. This server runs at localhost:8080 by default, meaning your build assets are available at localhost:8080/build. This server does not actually write the files to disk; instead it serves them from memory, allowing for hot module reloading.

As a consequence, the link and script tags need to point to the new server. If you're using the encore_entry_script_tags() and encore_entry_link_tags() Twig shortcuts (or are processing your assets through entrypoints.json in some other way), you're done: the paths in your templates will automatically point to the dev server.

The dev-server command supports all the options defined by webpack-dev-server. You can set these options via command line options:

1
2
3
4
5

# if you use the Yarn package manager
$ yarn encore dev-server --https --port 9000

# if you use the npm package manager
$ npm run dev-server -- --https --port 9000

You can also set these options using the Encore.configureDevServerOptions() method in your webpack.config.js file:

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

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

Encore
    // ...

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

1

$ ./node_modules/.bin/encore dev-server --hot

1
2
3
4
5
6
7
8

{
      ...
      "scripts": {
-        "dev-server": "encore dev-server",
+        "dev-server": "encore dev-server --https --pfx=$HOME/.symfony/certs/default.p12 --allowed-hosts=mydomain.wip",
          ...
      }
  }

1
2
3
4
5
6
7
8

{
      ...
      "scripts": {
-        "dev-server": "encore dev-server",
+        "dev-server": "encore dev-server --port 8080 --disable-host-check",
          ...
      }
  }