无法使 react-hot-loader 和 webpack-dev-server 与 react-router 一起工作

Posted

技术标签:

【中文标题】无法使 react-hot-loader 和 webpack-dev-server 与 react-router 一起工作【英文标题】：Can't make react-hot-loader and webpack-dev-server work with react-router 【发布时间】：2016-08-20 05:39:18 【问题描述】：

我正在尝试将 react-hot-loader 与 webpack-dev-server 和 react-router 一起使用，但是当我尝试访问 localhost:3000/ 时，我得到：

Cannot GET /

当然，当我尝试访问 localhost:8000/ 时它可以工作。我尝试关注react-hot-boilerplate，但没有成功。

这是我的代码：

server.js

const http = require('http');
const express = require('express');
const consolidate = require('consolidate');
const bodyParser = require('body-parser');
const routes = require('./routes');

const app = express();

app.set('views', 'public/pages'); // Set the folder-name from where you serve the html page.
app.set('view engine', 'html');
app.engine('html', consolidate.handlebars);
app.use(express.static('public')); // Set the folder from where you serve all static files
app.use(express.static('public/dist')); // Set the folder from where you serve all static files
app.use(bodyParser.urlencoded( extended: true ));

const portNumber = 8000;

http.createServer(app).listen(portNumber, () => 
  console.log(`Server listening at port $portNumber`);
  routes.initialize(app);
);

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');

new WebpackDevServer(webpack(config), 
  colors: true,
  historyApiFallback: true,
  inline: true,
  hot: true,
).listen(3000, 'localhost', (err) => 
  if (err) 
    console.log(err);
  
);

routes.js（所以所有路由都指向路由器）

function initialize(app) 
  const routes = [
    '/',
    '/login',
  ];

  routes.forEach((route) => 
    app.get(route, (req, res) => 
      res.render('main-content.html');
    );
  );


exports.initialize = initialize;

webpack.config.js

const webpack = require('webpack');
const path = require('path');

const nodeDir = `$__dirname/node_modules`;

const config = 
  resolve: 
    alias: 
      react: `$nodeDir/react`,
      'react-dom': `$nodeDir/react-dom`,
      'react-router': `$nodeDir/react-router`,
      'react-bootstrap': `$nodeDir/react-bootstrap`,
      velocity: `$nodeDir/velocity-animate`,
      moment: `$nodeDir/moment`,
      slimscroll: `$nodeDir/slimscroll`,
    ,
  ,
  entry: 
    routes: [
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server',
      './public/src/routes/js/main',
    ],
    vendors: [
      'react', 'react-dom', 'react-router', 'react-bootstrap',
      'velocity', 'moment', 'slimscroll',
    ],
  ,
  output: 
    path: path.join(__dirname, 'public/dist'),
    publicPath: path.join(__dirname, 'public/dist'),
    filename: 'bundles/[name].bundle.js',
    chunkFilename: 'chunks/[name].chunk.js',
  ,
  module: 
    loaders: [
      
        test: /\.jsx?$/,
        include: path.join(__dirname, 'public'),
        loader: 'react-hot',
      ,
      
        test: /\.js$/,
        include: path.resolve(__dirname, 'public'),
        loader: 'babel',
      ,
      
        test: /\.css$/,
        include: path.join(__dirname, 'public'),
        loader: 'style!css-loader?modules&importLoaders=1' +
        '&localIdentName=[name]__[local]___[hash:base64:5]',
      ,
    ],
  ,
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.CommonsChunkPlugin('vendors', './bundles/vendors.js', Infinity),
  ],
;

module.exports = config;

脚本

"scripts": 
    "dev": "webpack --config webpack.config.js",
    "hot": "webpack-dev-server --devtool eval --progress --colors --inline --hot",
    "build": "webpack -p --config webpack.config.prod.js"

ma​​in-content.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Brigad Admin Panel</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Customs -->
    <link rel="stylesheet" href="styles/global.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,400italic,700,600italic,700italic,800,800italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  </head>

  <body class="hold-transition">
    <div id="content"></div>

    <!--<script src="dist/bundles/vendors.js"></script>-->
    <!--<script src="dist/bundles/routes.bundle.js"></script>-->

    <script src="http://localhost:8080/public/dist/bundles/vendors.js"></script>
    <script src="http://localhost:8080/public/dist/bundles/routes.bundle.js"></script>
  </body>
</html>

入口点

import React from 'react';
import  render  from 'react-dom';
import  Router, browserHistory  from 'react-router';

import RootRoute from './components/RootRoute';

render(
  <Router history=browserHistory routes=RootRoute />,
  document.getElementById('content')
);

如何让react-hot-loader 工作？

提前致谢。

【问题讨论】：

你有没有得到这个工作？我可以让它加载我的入口路线，但没有其他路线可用。 嗨，这很愚蠢，我的正则表达式包含“/”并且我在 Windows 上 干杯。我最终放弃了 RHL，因为无法让 react-router 导航，浪费了太多时间试图让整个 webpack/babel/react/react-router/hot-reloading 堆栈工作！ 【参考方案1】：

您应该在webpack.config 中为publicPath 提供localhost:3000。

在 dev-server 配置中，您可能需要添加指向构建输出 (./public/dist) 的 contentBase 选项。

看看这个https://github.com/webpack/docs/wiki/webpack-dev-server#content-base

【讨论】：

啊，经过 1.5 小时的修补，这就是问题所在。干杯！

以上是关于无法使 react-hot-loader 和 webpack-dev-server 与 react-router 一起工作的主要内容，如果未能解决你的问题，请参考以下文章

无法让多应用 webpack 配置与 react-hot-loader 一起使用

Next.js：模块构建失败：错误：无法从“/home/ugurkaya/Desktop”中找到模块“react-hot-loader/babel”

react-hot-loader 和 webpack-dev-server 不会重新加载更改

react-hot-loader 和 webpack 不工作

如何让 react-hot-loader 与 webpack 2 和 webpackDevMiddleware 一起工作？

react-hot-loader: 未检测到 react-????-dom 补丁