webpack-dev-server 为 root localhost:8080 设置了错误的路径

Question

我是 ReactJS 的真正初学者。我需要你帮助为 localhost:8080 设置 webpack-dev-server。我正在按照此 YouTube Tutorial 进行设置，但在教程工作时我无法获得成功。它将根路径设置为 ../node_module/.bin 并在其中列出我的文件。它应该将 root 设置为 "react-for-everyone".

请参阅 Image 以检查 webpack-dev-server 的文件层次结构、浏览器和命令。

package.json:

    {
  "name": "react-for-everyone",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "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.*"
  }
}

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>

请检查并让我知道我做错的问题。

Answer 1

您正在 ../node_module/.bin 文件夹中运行ning webpack-dev-server 命令，因此 webpack-dev-server 将为该文件夹提供服务。您必须小心在哪里使用此命令，因为它知道启动它的文件夹。

要解决您的问题，请移至此文件夹中的 G:\wamp\react-for-anyone 和运行 ./node_modules/.bin/webpack-dev-server。

这应该允许 webpack-dev-server 找到您的 index.html 并在 http://localhost:8080 上提供它。

Answer 2

在 scripts in package.json 中添加 "dev": "./node_modules/.bin/webpack-dev-server --content-base" 并且运行您的 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.*"
  }
}

webpack-dev-server 为 root localhost:8080 设置了错误的路径

webpack-dev-server is setting wrong path for root localhost:8080

reactjs

webpack

webpack-dev-server