Javascript react客户端呈现错误无法获取/_Javascript_Reactjs_Webpack_React Router

Javascript react客户端呈现错误无法获取/

javascript reactjs webpack

Javascript react客户端呈现错误无法获取/,javascript,reactjs,webpack,react-router,Javascript,Reactjs,Webpack,React Router,我正在尝试学习react，在尝试客户端路由时遇到了一些问题。如果您看到我的文件中列出的错误，请告诉我。我在浏览器页面上不断遇到的错误是得不到/ 我在控制台中看到的错误是： live.bundle.js:14获取404（未找到）这是我的档案： webpack.config.js var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', './js/

我正在尝试学习react，在尝试客户端路由时遇到了一些问题。如果您看到我的文件中列出的错误，请告诉我。我在浏览器页面上不断遇到的错误是

得不到/

我在控制台中看到的错误是：

live.bundle.js:14获取404（未找到）

这是我的档案：

webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: [
    'webpack/hot/only-dev-server',
    './js/app.js'
  ],
output: {
    path: __dirname + '/build',
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.js?$/, loaders: ['react-hot', 'babel', 'babel-loader'], exclude: /node_modules/ },
      // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.css$/, loader: "style!css" }
    ]
  },
  devServer: {
    contentBase: "./src/www",
    noInfo: true,
    hot: true,
    inline: true
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ]
};

B.法律改革委员会

{
  "presets": ["es2015", "react"]
}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>New React App</title>
  </head>
  <body>
    <section id="react"></section>
    <script src="/build/bundle.js"></script>
  </body>
</html>

除去

从您的devServer配置。默认情况下，这将为当前目录中的文件提供服务。我相信这就是您要寻找的，以及index.html所在的位置？正确吗？

您是否检查了应用程序是否创建了输出文件

bundle.js

？如果没有，那就是原因。它根本找不到那个特定的文件，因为您在

index.html

文件中导入了它，这就是代码中的问题所在。因此，请确保创建了

bundle.js

文件。嗨，阿米尔，我的应用程序正在一个名为build的文件夹中创建bundle.js文件。您好，弗雷德里克，我添加了这个部分，因为如果我将其取出，会出现错误“未捕获错误：[HMR]热模块更换被禁用”。你还建议我这样做吗？如果是，我如何解决我刚才列出的错误？另外，我确实想为index.html文件提供服务，这就是我的index.html所在的位置。是的，我仍然要这样做，并将这一行添加到您的条目数组中。”webpack dev server/client？'，相应地更改端口，并将其添加到您的插件阵列新的webpack.HotModuleReplacementPlugin（）我按照您的建议进行了操作。我放在浏览器中的url是“localhost:8080/webpack dev server/#”；。我仍然收到错误“Uncaught error:[HMR}热模块替换被禁用”，我已经更新了我的问题，以显示您对webpack.config.js文件的修改。如果我误解了您的说明，请告诉我。在运行脚本时添加--inline标志。因此，请不要运行“npm start”而运行“npm start--inline”？如果是，我尝试过，但仍然出现错误“未捕获错误：[HMR]热模块更换已禁用”

import React from 'react';
import Router from 'react-router';
import {DefaultRoute, Link, Route, RouteHandler} from 'react-router';

import LoginHandler from './components/Login.js';

class App extends React.Component{
  render() {
    return(
      <div className="nav">

        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        {/* Important Part */}
        <RouteHandler/>

      </div>
    );
  }
}

let routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={LoginHandler}/>
  </Route>
);

ReactDOM.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

import React from 'react';
class Login extends React.Component{
  render() {
    return(
      <div>Welcome to login</div>
    );
  }
}

export default Login;

var webpack = require('webpack');
module.exports = {
  entry: [
    'webpack/hot/only-dev-server',
    './js/app.js',
    'webpack-dev-server/client?localhost:8080'
  ],
  output: {
    path: __dirname + '/build',
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.js?$/, loaders: ['react-hot', 'babel', 'babel-loader'], exclude: /node_modules/ },
      // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.css$/, loader: "style!css" }
    ]
  },
  devServer: {
    // contentBase: "./src/www",
    noInfo: true,
    hot: true,
    inline: true
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
};

contentBase: "./src/www",