我有一个现有的应用程序,它在服务器端运行 nodejs 和 express,在客户端运行 React。打字稿贯穿始终。
客户端代码是使用 create-react-app 创建的,并已被弹出。此代码在 /client 中。
服务器端代码在 /server 中。
这些文件夹中的每一个都有自己的 node_modules、package.json、webpack 配置等。
目前,我必须在开发时在端口 3000 上运行客户端,在端口 5000 上运行服务器。相反,我正在研究如何让它工作,以便一切都从端口 5000 运行,包括客户端捆绑包的自动重新编译。我认为 webpack-dev-middleware 可以让我做到这一点。但是,我遇到了与相对路径相关的问题。
这是我添加到服务器 (/server/src/app.ts) 的代码:
import * as webpack from 'webpack';
import * as webpackDevMiddleware from 'webpack-dev-middleware';
const webpackConfig = require('../../client/config/webpack.config.dev.js');
const webpackCompiler = webpack(webpackConfig);
this.app.use(webpackDevMiddleware(webpackCompiler, {
publicPath: webpackConfig.output.publicPath,
stats: { colors: true }
}));
我引用的 webpack 配置文件是 create-react-app 附带的标准配置文件。因为该文件位于 /client/config 文件夹中,所以我收到有关模块解析的错误:
ERROR in ../client/config/webpack.config.dev.js
Module not found: Error: Can't resolve './env' in '/client/config'
@ ../client/config/webpack.config.dev.js 11:29-45
@ ./src/app.ts
@ multi ./src/app.ts
ERROR in ../client/config/webpack.config.dev.js
Module not found: Error: Can't resolve './paths' in '/client/config'
@ ../client/config/webpack.config.dev.js 12:14-32
@ ./src/app.ts
@ multi ./src/app.ts
ERROR in ../client/config/webpack.config.dev.js
Module not found: Error: Can't resolve './polyfills' in '/client/config'
@ ../client/config/webpack.config.dev.js 37:4-34
@ ./src/app.ts
@ multi ./src/app.ts
在服务器端 webpack 捆绑期间发生此错误。有没有办法让它工作?