在带有C#Web Api后端的TypeScript中开发我的React应用程序时,我想使用热重载。我使用.Net框架而不是Core,因此我需要使用IIS或IIS Express。我可以在webpack dev server没有问题的情况下对前端进行热重装,但是我无法访问API资源。我能做到吗?
webpack dev server
找到了一个解决方案,webpack dev server用作IIS的反向代理。
NPM:
npm install --save react-hot-loader@next npm install webpack-dev-server --save-dev
webpack.config.js,IIS是运行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。如果随后访问,http://localhost:8080/我将进行热重装,并且仍然可以使用C#Web API,因为它将在“ http:// localhost:61299 / ”上代理IIS Express。
node_modules\.bin\webpack-dev- server
http://localhost:8080/