Using webpack-dev-server and HMR

5.0 version

Maintained

3.4 4.4 5.1 master

Unmaintained

3.3 4.0 4.1 4.2 4.3

edit this page

Using webpack-dev-server and HMR
- Hot Module Replacement HMR

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.

You can also pass options to the dev-server command: any options that are supported by the normal webpack-dev-server. For example:

1	$ yarn encore dev-server --https --port 9000

This will start a server at https://localhost:9000.

Hot Module Replacement HMR¶

Encore does support HMR for Vue.js, but does not work for styles anywhere at this time. To activate it, pass the --hot option:

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

If you experience issues related to CORS (Cross Origin Resource Sharing), add the --disable-host-check and --port options to the dev-server command in the package.json file:

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

Caution

Beware that it's not recommended to disable host checking in general, but here it's required to solve the CORS issue.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.