Webpack Dev Server Express Web服务器-Java 学习之路

我在设置开发工作流程时遇到问题，该工作流程将同时执行以下两个任务：

在文件更改时重新编译静态资产（js，css） . 服务这些静态资产 . 通知浏览器，只要资产发生更改，页面就必须重新加载 . 使用react-hot-loader .
使用express运行服务器，该服务器提供静态资产"consume"的API . 每次我的服务器文件更改时都要重新启动此Express服务器 .

最好的做法是让webpack-dev-server服务于静态资产，并且有一个单独的Web服务器在不同的端口上提供API吗？如果是这样，javascript中的API调用将需要指定主机和端口，并且需要在进入生产环境之前进行更改 . 似乎所有在线教程都关注＃1，并且没有设置API服务器 . 谁能指出我正确的方向？

我并不反对使用gulp和browserify或SystemJS而不是webpack，但似乎如果我想使用react-hot-loader，我需要使用webpack .

2 回答

你可以这样做：

创建express（）代理
创建一个webpack-dev-server
使用绝对URL链接资产
启动两台服务器 .

注意：确保使用不同的端口来运行这两个服务器 .

var proxy = require('proxy-middleware');
var express = require('express');
var url = require('url');

//----------------- Web Proxy--------------------
var app = express();
app.use('/assets', proxy(url.parse('http://localhost:8000/dist/assets')));
app.get('/api/url', function(req, res) {}
app.post('/api/url', function(req, res) {}

// ---------------Webpack-dev-server---------------------
var server = new WebpackDevServer(webpack(config), config.devServer);

// ---------------Run both servers-----------------------
server.listen(config.port, 'localhost', function(err) {});
app.listen(8080);

回复于 2024-04-26T12:34:15+08:00

0
我们去年一直在使用gulp webpack，它一直很棒 . 我们有一个API网关，它只提供一个静态html文件（index.html），其他一切只是REST endpoints . 然后在index.html中引用一个或两个css文件以及从我们的CDN（Cloudfront）加载的几个脚本 .

如果您在生产环境中以这种方式运行，则本地设置只需使用webpack dev服务器作为“本地CDN” . 你是对的，你的javascript将需要知道api url是什么，因为这将改变本地vs 生产环境 . 我们实际上有本地，开发，舞台和制作 - 一旦你将它设置为在2个环境中工作，就不难添加更多（这很好！）

现在我们的index.html有一些模板变量，它们在服务时由API网关填充 . 与此类似：
```
<script>
  var siteConfig = {
    apiBase: '<%=apiBaseUri%>',
    cdnBase: '<%=cdnBaseUri%>'
  };
</script>
<script src="<%=cdnBaseUri%>/assets/js/bundle.min.js"></script>
```
然后，当您的react应用程序启动时，您只需引入siteConfig，并将这些变量添加到任何api / cdn调用中 . 根据你的环境交换变量，bam，你已经完成了！

一个稍微简单的方法是在提供页面时填写那些变量，而不是在构建时完成 . 这就是我们如何开始，但随着事情的发展，它在运行时变得更容易管理 .

顺便说一句，我很确定你可以使用webpack完成所有这些 - gulp可能没有必要但是我们当时更容易使用gulp来运行单元测试，linting等 .
回复于 2024-04-26T12:34:15+08:00

Webpack Dev Server Express Web服务器

2 回答

相关问题