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

i have front-end application bundled webpack, served , talks node backend server.

webpack hot dev server running on 8080. node backend running on 1985.

i want serve index.html node, want assets served hot dev server during development. achieve have:

set absolute publicpath value in webpack config:

  output: {     publicpath: 'http://localhost:8080/'   }, 

and used absolute urls in index.html point hot dev server:

<script src="http://localhost:8080/webpack-dev-server.js"></script> <script src="http://localhost:8080/js/vendors.js"></script> <script src="http://localhost:8080/js/bundle.js"></script> 

so can run hot dev server , run node server , browse http://localhost:1985. great.

but when come deploy / run in production, not want. i'd relative urls vendors.js , bundle.js , don't want include webpack-dev-server.js script.

i use handlebars or other templating on server specify absolute / relative paths, wouldn't provide clean way of removing hot dev server script. have different index files each setup, seems lead bugs.

how can best structured / deployed enable use of hot dev server in development, while still allowing whole thing deployed , served via node in production?

we're doing templating approach suggested paths , sorta mitigated ugliness of webpack-dev-server.js script tag introducing environment variable specifies whether or not we're 'building' or 'developing'.

if you're using gulp task runner (we are), can set them process.env.name = value.

if you're using npm builds can add them via command line --name value.

the last step our backend server create variables fit our index.html template:

    <%     // connect hot-reload dev server     if (mode === 'dev') {         print("<script type='text/javascript' src='" + webpackurl + "/webpack-dev-server.js'></script>");     }     %>     <script type="text/javascript" src="<%= webpackurl %>/js/bundle.js"></script>