Using webpack-dev-server and HMR

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

1

$ yarn encore dev-server

This serves the built assets from a new server at http://localhost:8080 (it does not actually write any files to disk). This means your script and link tags need to change to point to this.

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

$ yarn encore 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",
        ...
    }
}