webpack-dev-server устанавливает неправильный путь для корневого локального хоста: 8080

#reactjs #webpack #webpack-dev-server

Вопрос:

Я настоящий новичок в ReactJS. Мне нужна ваша помощь в настройке webpack-dev-server для локального хоста: 8080. Я следую этому руководству YouTube, чтобы настроить его, но я пока не могу добиться успеха, пока в учебнике он работает. он устанавливает корневой путь как ../node_module/.bin и перечисляет в нем мои файлы. Он должен установить root как «реагирующий для всех».

Смотрите Изображение, чтобы проверить иерархию файлов, браузер и команду для webpack-dev-server.

package.json:

     {
  "name": "react-for-everyone",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" amp;amp; exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies":{
      "babel-core": "^6.1.*",
      "babel-loader": "^6.2.*",
      "babel-preset-es2015": "^6.16.*",
      "babel-preset-react": "^6.16.*",
      "webpack": "^1.13.*",
      "webpack-dev-server": "^1.16.*"
  },
  "dependencies":{
      "react": "^15.3.*",
      "react-dom": "^15.3.*"
  }
}

webpack-config.js:

 module.exports ={
//  entry:'./src/App.js',
    entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/App.js'
    ],
    output: {
        path: path.resolve(__dirname, "react-for-everyone"),
        filename: 'app.js',
        publicPath: 'http://localhost:8080'
    },
    devServer: {
        contentBase: "./react-for-everyone",
    },
    module:{

        loader:[{
            test: "/.jsx?$/",
            exclude: /node_modules/,
            loader: "babel",
            query: {
                preset: ['es2015', 'react']
            }
        }]
    }
};

index.html:

     <!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>

<body>
<div id="app">This is an App.</div>
<script src="app.js"></script>
</body>
</html>

Пожалуйста, проверьте и сообщите мне о проблемах, в которых я ошибаюсь.

1. ваша ссылка на учебник YouTube неверна. Также у вас есть опечатка в publichPath исправьте это и посмотрите, работает ли это

2. Я отредактировал ссылку на учебник , пожалуйста, проверьте

3. Вы пытались исправить ошибку ввода

4. Нет, он все еще отображает эту страницу . Но если мы поместим наш index.html в этой папке затем отображается содержимое в ней, однако .jsx и .js не будут работать с этим трюком , я думаю, это не стандарт.

5. Какую папку вы имеете в виду. Он уже находится в вашей папке react-for-everyone, верно

Ответ №1:

Добавьте "dev": "./node_modules/.bin/webpack-dev-server --content-base" scripts in package.json и запустите свой react-for-everyone веб-пакет из папки как npm run dev

Package.json

 {
  "name": "react-for-everyone",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "./node_modules/.bin/webpack-dev-server --content-base",
    "test": "echo "Error: no test specified" amp;amp; exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies":{
      "babel-core": "^6.1.*",
      "babel-loader": "^6.2.*",
      "babel-preset-es2015": "^6.16.*",
      "babel-preset-react": "^6.16.*",
      "webpack": "^1.13.*",
      "webpack-dev-server": "^1.16.*"
  },
  "dependencies":{
      "react": "^15.3.*",
      "react-dom": "^15.3.*"
  }
}

Ответ №2:

Вы запускаете команду webpack-dev-server в папке ../node_module/.bin, поэтому webpack-dev-server будет обслуживать эту папку. Вы должны быть осторожны, где использовать эту команду, потому что она знает о папке, из которой она была запущена.

Чтобы решить вашу проблему, перейдите к G:wampreact-for-anyone и запустите ./node_modules/.bin/webpack-dev-server в этой папке.

Это должно позволить webpack-dev-server найти ваш index.html и подавайте его на http://localhost:8080 .

1. Он не работает ни в этой папке, webpack-dev-server не распознается как внутренняя или внешняя команда . проверьте этот снимок экрана

2. Фактическая программа «webpack-dev-server» все еще находится в ./node_modules/.bin, поэтому вам нужно выполнить команду ./node_modules/.bin/webpack-dev-server в вашей папке react-for-everyone. Есть и другие варианты, чтобы заставить его работать: установите webpack-dev-server глобально (npm i -g webpack-dev-server). Это позволяет запускать webpack-dev-server из любой папки. См. docs.npmjs.com/getting-started/installing-npm-packages-globally

3. Спасибо, вы дали мне новый способ изучить React… Глобально это не работает, я рассмотрю это позже…