ПОЛУЧИТЬ http://localhost:3000/bundle.js net ::ERR_ABORTED 404 (не найден)

#javascript #node.js #reactjs #webpack #babeljs

Вопрос:

Уже есть другие подобные вопросы, но проблема все еще преследует меня, несмотря на эти ответы — я использую webpack и babel в проекте, но консоль браузера всегда показывает ошибку 404 при попытке найти bundle.js.

Это мой package.json:

 {
  "name": "node-str",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" amp;amp; 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>
        );
    }
});

Структура проекта:

>>структура<<

Есть какие-нибудь подсказки, почему это происходит?

1. "node ./bin/server.js" Итак, что находится в этом файле? Или в том, с чего вы на самом деле запускаете свой «сервер» на порту 3000. Обратите внимание, что bundle.js выводится webpack в dist/bundle.js , и опять же, это маловероятно в позиции относительного пути к корневому серверу / . Лично я бы не стал «отображать на стороне сервера» корневой контекст, а делал бы что-то только внутри изменяющихся маршрутов. 'index.html' Как бы то ни было, в качестве наилучшей практики действительно должно быть статическое содержимое.

2. Вам следует попробовать использовать path:__dirname '/dist', в вашей конфигурации js webpack bundle.

Ответ №1:

Использовать

 output: {
  ...
  publicPath: '/',
},

в вашей конфигурации webpack.

Ответ №2:

Попробуйте

 path.join(__dirname, dist)

И проверяем, не bundle.js создается по заданному пути.

Ответ №3:

попробуйте в вашем index.html вам нужно было добавить косую черту к URL-адресу используемого внешнего файла скрипта. Другими словами, я заменил следующее, <script src="index.bundle.js"></script> на следующее, <script src="/index.bundle.js"></script> у меня это работает