javascript - Setup webpack hot dev-server with a Node backend for production -

I have a front-end bundle with webpack, which is served from a node backend server and talks Does.

WebPack is running on Hot Dev Server 8080 . The node backend is running on 1985 .

I want to serve index.html from the node, but should be served by the hot dev server during development. I have to get it:

Set a full public text value in webpack config:

  Output: {publicPath: 'http : // localhost: 8080 / '},  

and index.html is used to indicate the full URL on the hot dev server: < / P>

  & lt; Script src = "http: // localhost: 8080 / webpac-dev-server.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http: // localhost: 8080 / js / vendors.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http: // localhost: 8080 / js / bundle.js" & gt; & Lt; / Script & gt;  

So I can run hot dev server and run my node server and browse on http: // localhost: 1985 . Everything is great.

But when I come to deploy / run production, it certainly is not what I want. I need a relative URL for vendors.js and bundle.js and I definitely want to webpack-dev-server.js script.

I can use Handlebars or any other template to specify the absolute / relative path, but it will not provide a clear way of deleting the hot dev server script I It could also have separate index files for each setup, but it seems that it quickly leads to bugs.

It can be structured / deployed to enable the use of hot dev servers in the development, while still allowing the whole thing to be deployed and to be used in the production of nodes. Used to be?

We are currently doing the path that was suggested and the way you suggested Had given that a frustration of the WebPack-dev-server.js script tag was reduced by starting an environment variable, it specifies whether we are 'building' or 'developing' or not.

If you are using Gill as a work runner (we are), you can set them with process.env.NAME = VALUE .

If you are using npm, you can add them with the command line through - NAME VALUE .

The last step for our backend server is to create variables that are fit in our index. Html Template:

  & lt;% // Connect hot-reload dev server if (mode === 'dev') {print ("& lt; script type = 'text / Javascript 'src =' "+ webpackURL +" /webpack-dev-server.js'> & lt; / script & gt; "); }% & Gt; & Lt; Script type = "text / javascript" src = "& lt;% = webpackURL% & gt; /js/bundle.js" & gt; & Lt; / Script & gt;