获取http://localhost:3000/bundle.js net::ERR_ABORTED 404（未找到）

Question

获取http://localhost:3000/bundle.js net::ERR_ABORTED 404（未找到）

Ped*_*lho 6 javascript node.js reactjs webpack babeljs

已经有其他类似的问题，但尽管有这些答案，这个问题仍然困扰着我 - 我在一个项目中使用 webpack 和 babel，但在尝试查找 bundle.js 时浏览器的控制台总是显示错误 404。

这是我的package.json：

{
  "name": "node-str",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ./bin/server.js"    
  },
  "keywords": [],
  "author": "Pedro_Coelho",
  "license": "ISC",
  "dependencies": {
    "babel-register": "^6.26.0",
    "body-parser": "^1.18.3",
    "create-react-class": "^15.6.3",
    "debug": "^3.1.0",
    "ejs": "^2.6.1",
    "express": "^4.16.3",
    "guid": "0.0.12",
    "http": "0.0.0",
    "md5": "^2.2.1",
    "mongoose": "^5.2.4",
    "react": "^16.6.1",
    "react-dom": "^16.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.18.3",
    "webpack-cli": "^3.1.2"
  }
}

Run Code Online (Sandbox Code Playgroud)

这是我的webpack.config.js：

module.exports = {
    entry: 'src/client.js',
    output: {
      filename:'bundle.js',
        //path: './public',
        path:__dirname + 'dist',
        publicPath: "./public" 
    },
    module: {
        loaders: [
            {
              test: /\.jsx?$/,
              loader: 'babel-loader',

              exclude: /node_modules/,
              query: {
                cacheDirectory: true,
                presets: ['react', 'es2015']
              }              
            }
          ]
    },
    //devtool: 'source-map',
    resolve: {
        extensions: ['', '.js', '.jsx']
      },
      devServer: { historyApiFallback: true }, // to serve your index.html in place of 404 responses
};

Run Code Online (Sandbox Code Playgroud)

这是我的about.js文件，其中脚本中引用了 bundle.js：

var React = require('react');
var createReactClass = require('create-react-class');

module.exports = createReactClass({
    _handleClick: function () {
        alert("Hello!");
    },
    render: function () {
        return (
            <html>
                <head>
                    <title>About - React Page</title>
                    <link rel='stylesheet' type="text/css" href='/style.css' />
                </head>
                <body>
                    <div>
                        <h1>Hello World!</h1>
                        <p>Isn't server-side rendering remarkable?</p>
                        <button onClick={this._handleClick}>Click Me</button>
                    </div>
                    <script type="text/javascript" src='/bundle.js' />
                </body>
            </html>
        );
    }
});

Run Code Online (Sandbox Code Playgroud)

项目结构：

>>结构<<

任何线索为什么会发生这种情况？