Development - Vagrant | webpack

If you have a more advanced project and use Vagrant to run your development environment in a Virtual Machine, you'll often want to also run webpack in the VM.
To start, make sure that the Vagrantfile has a static IP;
Next, install webpack, webpack-cli, and webpack-dev-server in your project;
Make sure to have a webpack.config.js file. If you haven't already, use this as a minimal example to get started:
And create an index.html file. The script tag should point to your bundle. If output.filename is not specified in the config, this will be main.js ([name].js for the default main entry).
Note that you also need to create an app.js file.
Now, let's run the server:
By default, the server will only be accessible from localhost. We'll be accessing it from our host PC, so we need to change --host to allow this.
webpack-dev-server will include a script in your bundle that connects to a WebSocket to reload when a change in any of your files occurs. The --client-web-socket-url flag makes sure the script knows where to look for the WebSocket. The server will use port 8080 by default, so we should also specify that here.
--watch-options-poll makes sure that webpack can detect changes in your files. By default, webpack listens to events triggered by the filesystem, but VirtualBox has many problems with this.
The server should be accessible on http://10.10.10.61:8080 now. If you make a change in app.js, it should live reload.
To mimic a more production-like environment, it is also possible to proxy the webpack-dev-server with nginx.
In your nginx configuration file, add the following:
The proxy_set_header lines are important, because they allow the WebSockets to work correctly.
The command to start webpack-dev-server can then be changed to this:
This makes the server only accessible on 127.0.0.1, which is fine because nginx takes care of making it available on your host PC.
We made the Vagrant box accessible from a static IP, and then made webpack-dev-server publicly accessible so it is reachable from a browser. We then tackled a common problem that VirtualBox doesn't send out filesystem events, causing the server to not reload on file changes.
Copyright OpenJS Foundation and webpack contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy