reactjs – 无法使react-hot-loader和webpack-dev-server与react

发布时间：2020-12-15 05:07:24 所属栏目：百科来源：网络整理

导读：我正在尝试使用react-hot-loader与webpack-dev-server和react-router,但是当我尝试访问localhost时：3000 /我得到：不能获取 / 当然,它在我尝试访问localhost：8000 /时有效.我试图遵循react-hot-boilerplate,没有成功. 这是我的代码： server.js const htt

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

不能获取 /

当然,它在我尝试访问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,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,loader: 'babel',{
        test: /.css$/,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"
  }

主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')
);

如何使反应热加载器工作？

提前致谢.

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!