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

Я настоящий новичок в ReactJS. Мне нужно, чтобы вы помогли настроить webpack-dev-сервер для localhost: 8080. Я следую этому учебному пособию YouTube, чтобы настроить его, но я не могу добиться успеха, пока его учебник работает. он устанавливает корневой путь как ../node_module/.binи перечислил мне файлы в нем. Он должен установить корень как «{« name »:« response-for-all »,« version »:« 1.0.0 »,« description »:« »,« main »:« app.js »,« scripts »: {"test": "echo " Ошибка: не указан тест "&& 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. * "}," Зависимости ": {" реагировать ":" ^ 15.3. * "," Реакция-dom ":" ^ 15.3 . * "}}".

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

package.json:

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']
            }
        }]
    }
};

WebPack-config.js:

    <!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>

index.html:

"dev": "./node_modules/.bin/webpack-dev-server --content-base"

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

reactjs,webpack,webpack-dev-server,

2

Ответов: 2


2 принят

Добавить scripts in package.jsonв react-for-everyoneи запустить Webpack сформировать 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" && 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.*"
  }
}

0

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

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

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

reactjs, WebPack, WebPack-DEV-сервер,