http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server
Even though it doesn’t look like it, everything that you need to know is placed in that blurb. If you pay attention to the port numbers, the backend is placed on port 9090 and the webpack-dev-server is placed on port 8080.
So the idea is that your backend on port 9090 will be responsible for serving that preliminary html file. Inside of that html file, the script tag will be pointing toward localhost on port 8080, the webpack-dev-server.
Then you follow the rest of the instructions and it should work just fine.
Incidentally, the root directory was inside of a subdirectory for me, let’s call it “WPExperimental”. I would navigate to it by going to localhost/WPExperimental/index.html
Also, let’s put all assets under the “asset” folder.
So when writing out the configurations, script src in the html page will point to:
"http://localhost:8080/WPExperimental/asset/bundle.js"
and the output publicPath in the webpack config file will be set to:
"http://localhost:8080/WPExperimental/asset/"
index.html is located under the WPExperimental subfolder. As we mentioned before, pulling the webpage means that we can navigate to in the web browser’s address bar:
http://localhost:9090/WPExperimental/index.html
Notice how I’m using port 9090? That’s the backend address and we want it to serve the initial template.
And voila. You set in place a system where you navigate like normal with your backend server, however the javascript stuff are going to be served separately from the webpack_dev_server.
Incidentally, when it’s time to take it to production, I was planning on using Twig, a PHP templater, to mess with the script src link. Something like
"{{ rootdir }}/asset/bundle.js"
Where rootdir:
equals “http://localhost:8080/WPExperimental/” when DEBUG tokens are enabled.
and equals “/WPExperimental/” when DEBUG tokens are not enabled.