的WebPack開發服務器+高速Web服務器

Question

我無法建立一個開發流程，將兩者都做的同時以下任務：

1. 重新編譯靜態資產（JS，CSS）的文件更改。爲這些靜態資產提供服務。通知瀏覽器該頁面必須在資產發生變化時重新加載。使用react-hot-loader。
2. 使用express來運行服務器，該服務器爲靜態資產將「消耗」的API提供服務。任何時候我的服務器文件發生變化時，請讓此快速服務器重新啓

使webpack-dev-server爲靜態資產提供服務並使單獨的web服務器在不同端口上提供API的最佳實踐是？如果是這樣，JavaScript中的API調用將需要指定主機和端口，並且在投入生產之前需要更改。看起來，所有在線教程都集中在＃1上，而不是建立一個API服務器。任何人都可以指出我正確的方向嗎？

我不反對使用gulp和browserify或SystemJS代替webpack，但似乎如果我想使用react-hot-loader，我需要使用webpack。

Answer 1

去年我們一直在使用gulp + webpack，它一直很棒。我們有一個API網關，它只提供一個靜態html文件（index.html），其他所有內容都只是REST端點。然後在index.html中，我們引用一個或兩個css文件，以及從CDN（Cloudfront）加載的幾個腳本。

如果您在生產環境中運行該方式，您的本地設置只需使用webpack dev服務器作爲「本地CDN」即可。你是正確的，你的javascript需要知道api url是什麼，因爲這會改變本地和生產。我們實際上有本地，開發，舞臺和製作 - 一旦你有它設置工作在2個環境中不難添加更多（這是好事！）

現在我們的index.html有一些模板變量得到填充通過API網關提供。與此相似：

<script> 
    var siteConfig = { 
    apiBase: '<%=apiBaseUri%>', 
    cdnBase: '<%=cdnBaseUri%>' 
    }; 
</script> 
<script src="<%=cdnBaseUri%>/assets/js/bundle.min.js"></script> 

然後你只需拉siteConfig當你反應過來的應用程序正在啓動，在前面加上這些變量的任何API/CDN呼叫。根據你的環境交換變量，然後bam，你就完成了！

稍微簡單一些的方法是在頁面提供時填充這些變量，而不是在構建時填寫。多數民衆贊成我們如何開始，但隨着事情的發展變得更容易管理在運行時間。

BTW，我敢肯定，你可以做到這一切只需使用的WebPack的 - 一飲而盡可能不是必要的，但它在使用一口運行單元測試，掉毛的時間對我們來說更容易，等

Answer 2

你可以做這樣的事情：

• 創建快遞（）代理
• 創建的WebPack-DEV-服務器
• 鏈接與絕對URL
• 啓動BOT資產h服務器。

注意：確保有不同的端口來運行這兩個服務器。

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);