安装带有Node后端的webpack hot dev-server进行生产
我有一个与webpack绑定的前端应用程序，由一个Node后端服务器提供服务并与之通话。
Webpack热开发服务器在8080上运行。 节点后端在1985运行。
我想从Node提供index.html ，但想在开发期间从热开发服务器提供资源。 为了达到这个我有：
在webpack config中设置一个绝对的publicPath值：
output: { publicPath: 'http://localhost:8080/' },
并使用index.html绝对URL指向热开发服务器：
<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>
所以我可以运行热开发服务器并运行我的节点服务器并浏览到http://localhost:1985 。 一切都很好。
但是当我来部署/运行生产时，这绝对不是我想要的。 我想要bundle.js和bundle.js相对URL，我绝对不想包含webpack-dev-server.js脚本。
我可以在服务器上使用Handlebars或其他模板来指定绝对/相对path，但不能提供清除热开发服务器脚本的干净方式。 我也可以为每个设置有不同的索引文件，但这似乎很快就会导致错误。
这怎么能够被最好地结构化/部署，以便在开发中使用热开发服务器，同时仍然允许通过节点在生产中部署和服务整个事物？
我们目前正在为pathbuild议使用模板方法，并通过引入一个指定我们是“构build”还是“开发”的环境variables来缓解webpack-dev-server.js脚本标记的丑陋。
如果您使用gulp作为任务运行者（我们），则可以使用process.env.NAME = VALUE来设置它们。
如果您使用的是npm版本，您可以通过命令行添加--NAME VALUE 。
然后，我们后端服务器的最后一步就是创build适合我们的index.html模板的variables：
<% // connect the 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>
出于这个原因，我停止使用webpack-dev-server ，而是使用webpack-dev-middleware / webpack-hot-middleware的组合，因为后者允许您将它们挂载到现有的express服务器中。
我的服务器基本上这样做：
const express = require('express'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const config = require('./webpack.config.js'); const app = express(); if (process.env.WEBPACK_DEV_SERVER === 'true') { const config = webpack(config); app.use(webpackDevMiddleware(compiler)); app.use(webpackHotMiddleware(compiler)); } else { app.use(express.static(path.join(__dirname, './dist')); } app.use((req, res) => { res.status(200).send(` <!doctype html> <html> <head> <title>App</title> </head> <body> <div id="root"></div> <script src="/bundle.js"></script> </body> </html> `); });
你可以在60fram.es反应样板中看到一个完整的例子