javascript - How to point to a webpack dev server with HMR from a PHP script?

I'm slowly migrating a legacy PHP app to Vue. An initial step is to have the PHP script point to a webpack dev server so that all the nice features of the vue-cli can be used. What this looks like is:

index.php

<?php
require_once("very_complicated_file.php");
require_once("other_complicated_file.php");
?>

//some js scripts/libraries that are required for the vue app to work, and used elsewhere in the PHP app
<script src="..." />
<script src="....." />

??? //<-------

<?php 
//some more other hard-to-factor-out-php that is needed for the vue app
?>
Copy code

The thing that is most confusing to me right now is when I have my vue-cli/webpack-dev-server running (on the same server as the PHP), what should this web page request from the server to get all the needed files to run the vue app? The confusing part to me is that the webpack dev server doesn't actually save any files to the filesystem in the dev environment, so I don't know what to request. For example, in prod, I just requestapp.js and that's all I need. However, here, it's unclear how to connect the files delivered by webpack dev server to the rendered PHP script. Another hole in my knowledge is also how HMR works with this setup. Does the JS delivered by the dev server magically contain HMR reloading code that's injected by the vue-cli build system? Another way of phrasing this question might be: how can I explicitly import all the assets that are delivered by webpack dev server, that are served by default in a normal/stock vue-cli project setup?

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.