Express 当用作中间件时，带有React热加载程序的Web包开发服务器未解析JSX

我在尝试让webpack开发中间件/webpack热中间件与我的express服务器一起工作时遇到了一个障碍。如果我直接运行webpack配置，它运行得很好，但是当我尝试从中间件运行它时，它不会解析JSX

这是我的配置

{
  "name": "client",
  "entry": [
    "react-hot-loader/patch",
    "webpack-dev-server/client?http://0.0.0.0:5000",
    "webpack/hot/only-dev-server",
    "webpack-hot-middleware/client?quiet=true",
    "./lib/ui/index.js"
  ],
  "output": {
    "path": "/dist",
    "filename": "app.js?h=[hash]",
    "sourceMapFilename": "app.map?h=[hash]"
  },
  "devtool": "cheap-module-source-map",
  "module": {
    "loaders": [
      {
        "test": /\.jsx?$/,
        "loaders": [
          "react-hot-loader/webpack",
          "babel-loader"
        ],
        "include": [
          "apps",
          "lib"
        ]
      },
      {
        "test": /\.css$/,
        "loader": "style-loader!css-loader"
      },
      {
        "test": /\.less$/,
        "loader": "style-loader!css-loader!less-loader"
      },
      {
        "test": /\.(png|jpg|gif)$/,
        "loader": "url-loader?limit=-1"
      },
      {
        "test": /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
        "loader": "url-loader?limit=8192&mimetype=application/font-woff"
      },
      {
        "test": /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
        "loader": "file-loader"
      }
    ]
  },
  "plugins": [
    new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
            'process.env.HOSTNAME': os.hostname(),
            __DEV__: NODE_ENV !== 'production',
            __PROD__: NODE_ENV === 'production'
        }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

这是我的app.js钩子，用于中间件

if (module.hot) {
    console.log("Adding hot server middleware");
    const webpack = require('webpack');
    const webpackDevMiddleware = require("webpack-dev-middleware");
    const webpackHotMiddleware = require("webpack-hot-middleware");
    const config = require('../../webpack-dev.config');
    console.log(JSON.stringify(config));
    const compiler = webpack(config);

    app.use(webpackDevMiddleware(compiler, {
        hot: true,
        filename: 'app.js',
        publicPath: '/dist/',
        stats: {
            colors: true,
        },
        historyApiFallback: true,
    }));

    app.use(webpackHotMiddleware(compiler, {
        log: console.log,
        path: '/__webpack_hmr',
        heartbeat: 10 * 1000,
    }));
}

下面是我在运行服务器时看到的错误

webpack/hot/仅开发服务器webpack热中间件/客户端？quiet=true ./lib/ui/index.js 76字节{0}[编译] +260个隐藏模块

ERROR in ./lib/ui/index.js
Module parse failed: C:\Users\jesse\oui-tools\lib\ui\index.js Unexpected token (23:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|   <Provider store={configureStore()}>
|     <MuiThemeProvider muiTheme={muiTheme}>
|       <Routes />
 @ multi react-hot-loader/patch webpack-dev-server/client?http://0.0.0.0:5000

./lib/ui/index.js中的

错误
模块分析失败：C:\Users\jesse\oui tools\lib\ui\index.js意外令牌（23:2）
您可能需要适当的加载程序来处理此文件类型。
|
|ReactDOM.render(
|   
|     
|       
@多反应热加载程序/修补程序网页包开发服务器/客户端？http://0.0.0.0:5000

webpack/hot/仅开发服务器webpack热中间件/客户端？quiet=true ./lib/ui/index.js

---

当我直接运行webpack配置时，它会自动生成。请帮助，我完全被卡住了。我在react hot loader的v3上。

我也在使用webpack运行express服务器。不确定这是否会影响运行。但我想这就是问题所在。可能是因为您还没有向您添加

publicPath

属性r Webpack config？@Jesse F你想为“index.html”服务吗从服务器还是从客户端的静态文件？我很想看看您的配置文件的其余部分。您是否找到了解决方案？我也正在使用webpack运行express server。不确定这是否会影响工作。但我认为这就是问题所在。可能是因为您还没有将

publicPath

属性添加到您的webpack中config？@Jesse F你是想从服务器端提供“index.html”还是从客户端提供静态文件？我很想看看你的配置的其余部分。你有没有找到解决方案？

ERROR in ./lib/ui/index.js
Module parse failed: C:\Users\jesse\oui-tools\lib\ui\index.js Unexpected token (23:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|   <Provider store={configureStore()}>
|     <MuiThemeProvider muiTheme={muiTheme}>
|       <Routes />
 @ multi react-hot-loader/patch webpack-dev-server/client?http://0.0.0.0:5000