1

我在尝试让 webpack-dev-middleware/webpack-hot-middleware 与我的快速服务器一起工作时遇到了障碍。如果我直接运行 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,
    }));
}

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

Adding hot server middleware
webpack built 92f9412eb41d32640224 in 1564ms
Hash: 92f9412eb41d32640224
Version: webpack 2.5.1
Time: 1564ms
                         Asset    Size  Chunks                    Chunk Names
 app.js?h=92f9412eb41d32640224  621 kB       0  [emitted]  [big]  main
app.map?h=92f9412eb41d32640224  757 kB       0  [emitted]  [big]  main
chunk    {0} app.js?h=92f9412eb41d32640224, app.map?h=92f9412eb41d32640224 (main) 574 kB [entry] [rendered]
   [24] (webpack)/buildin/module.js 517 bytes {0} [built]
   [82] ./~/querystring-es3/index.js 127 bytes {0} [built]
  [100] ./~/strip-ansi/index.js 161 bytes {0} [built]
  [101] ./lib/ui/index.js 304 bytes {0} [built] [failed] [1 error]
  [102] ./~/react-hot-loader/patch.js 41 bytes {0} [built]
  [103] (webpack)-dev-server/client?http://0.0.0.0:5000 3.97 kB {0} [built]
  [104] (webpack)-hot-middleware/client.js?quiet=true 6.68 kB {0} [built]
  [105] (webpack)/hot/only-dev-server.js 2.29 kB {0} [built]
  [219] ./~/react-hot-loader/lib/patch.js 209 bytes {0} [built]
  [266] ./~/url/url.js 23.3 kB {0} [built]
  [268] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
  [269] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built]
  [270] (webpack)-hot-middleware/process-update.js 3.88 kB {0} [built]
  [272] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [274] multi 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 76 bytes {0} [built] + 260 hidden modules

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

webpack/hot/only-dev-server webpack-hot-middleware/client?quiet=true ./lib/ui/index.js

当我直接运行 webpack 配置时，它构建没有任何错误。请帮助，我完全被卡住了。我在 react-hot-loader 的 v3 上。

4

0 回答 0