2
我想用C#Web Api後端在TypeScript中開發我的React應用程序時使用熱重新加載。我使用.Net框架,而不是核心,所以我需要使用IIS或IIS Express。我可以使用webpack dev server
沒有問題的前端熱重新加載,但是我無法訪問API資源。我可以做到這一點嗎?反應與Typescript熱重新加載IIS網絡服務器
我想用C#Web Api後端在TypeScript中開發我的React應用程序時使用熱重新加載。我使用.Net框架,而不是核心,所以我需要使用IIS或IIS Express。我可以使用webpack dev server
沒有問題的前端熱重新加載,但是我無法訪問API資源。我可以做到這一點嗎?反應與Typescript熱重新加載IIS網絡服務器
找到一個解決方案,使用webpack dev server
作爲reverse proxy到IIS。
NPM:
npm install --save [email protected]
npm install webpack-dev-server --save-dev
webpack.config.js,代理在IIS運行:
var webpack = require('webpack');
var path = require("path");
var proxy = 'localhost:61299';
module.exports = {
entry: [
// activate HMR for React
'react-hot-loader/patch',
// the entry point of our app
'./Scripts/src/index.tsx',
],
//entry: "./Scripts/src/index.tsx",
output: {
filename: "./Scripts/dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
//{ test: /\.tsx?$/, loader: "ts-loader" }
{ test: /\.tsx?$/, loader: ['react-hot-loader/webpack', 'ts-loader'] }
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NamedModulesPlugin(),
// prints more readable module names in the browser console on HMR updates
],
devServer: {
proxy: {
'*': {
target: 'http://' + proxy,
}
},
port: 8080,
host: '0.0.0.0',
hot: true,
},
}
然後我就可以使用此命令從項目根文件夾中啓動Web服務器:node_modules\.bin\webpack-dev-server
。如果我然後訪問我有熱重新加載,我仍然可以使用C#web API,因爲它將代理IIS Express在「http://localhost:61299/」