Question

已经有其他类似的问题，但是尽管有这些答案，问题仍然困扰着我-我在项目上使用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"
  }
}

这是我的 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
};

这是我的 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>
        );
    }
});

项目的结构：

>>structure<<

任何线索为什么会这样？

Answer 1

使用

  <div class="container">
  
    <div id="modal">model content
      <div class="close"> x </div>
      <button onclick="changeColor()">green</button>
    </div>
    <div id="innerBox">
      <div class="box 1">box1</div>
      <div class="box 2">box2</div>
      <div class="box 3">box3</div>
      <div class="box 4">box4</div>
    </div>
  </div>

在您的Webpack配置中。

Answer 2

尝试 path.join（__ dirname，dist）

并验证bundle.js是否在给定路径中创建。

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

2 个答案: