Express/Webpack/React：如何根据端点发布不同的客户端应用程序？答案

【问题标题】：Express/Webpack/React : How to ship different client-side apps depending on the endpoint?Express/Webpack/React：如何根据端点发布不同的客户端应用程序？
【发布时间】：2016-06-01 19:11:08
【问题描述】：

我正在尝试了解如何将 Express 和 Webpack 一起使用以发出不同的...

1) 客户端 js 包

2) 索引.html

3) 其他静态资源

...取决于命中的 Express 端点。

模块化：

我看到 Express 可以如何基于路由模块化服务器代码，以及 Webpack 可以进行代码拆分，但我不能完全将两者结合在一起以基于端点发送完全不同的应用程序。

就像我想象的这样的解决方案：

Express 中的文件结构：

/app
 -app.html
 /public
  -bundle.js 

/app2
 -app2.html
 /public
  -bundle2.js

app.js

app.use("/app1", express.static(__dirname + "/app1/public/"));

app.use("/app2", express.static(__dirname + "/app2/public2"));

app.get('/app', function(req, res){
    res.sendFile(__dirname + '/app1/app1.html');
});

app.get('/app2', function(req, res){
    res.sendFile(__dirname + '/app2/app2.html');
});

然而，我还没有看到任何有信誉的例子做这样的事情 - 这通常意味着我做错了什么。哈哈

我所看到的：

-使用相同公用文件夹的Webpack代码拆分示例（您如何发送不同的静态数据？）

-由于我使用的是 React - 大多数示例是混合的服务器端策略（同构）和/或使用 Jade（这使得很难想象如何为纯粹的客户端 js 策略创建拆分结构）。

问题：

是否有一种标准化的方式来构建我使用 Webpack 和 Express 描述的客户端编码拆分？

【问题讨论】：

标签： express reactjs webpack

【解决方案1】：

Express 做了一个非常简短的mention 子应用程序：

var express = require('express');

// app 1
var app1 = express();
app1.use("/", express.static('app1'));

// app 2
var app2 = express();
app2.use("/", express.static('app2'));

// main app
var app = express();
app.use('/app1', app1);
app.use('/app2', app2);

app.listen(3000);

表达mentions也写了一个单独的中间件和路由系统：

var express = require('express');

// app 1
var app1 = express.Router();
app1.use("/", express.static('app1'));

// app 2
var app2 = express.Router();
app2.use("/", express.static('app2'));

// main app
var app = express();

app.use('/app1', app1);
app.use('/app2', app2);

app.listen(3000);

【讨论】：