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

【问题标题】：webpack-dev-server is setting wrong path for root localhost:8080webpack-dev-server 为 root localhost:8080 设置了错误的路径
【发布时间】：2017-02-16 04:27:45
【问题描述】：

我是 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>

请检查并告诉我我做错的问题。

【问题讨论】：

您的 youtube 教程链接不正确。另外，您在publichPath 中有错字，请更正一下，看看它是否有效
我已经编辑了tutorial链接，请检查
你有没有尝试修复输入错误
不，它仍然显示this page。但是，如果我们将 index.html 放在这个文件夹中，那么它会在其中显示内容，但是 .jsx 和 .js 将无法使用这个 trick，我猜它不是标准。
你的意思是哪个文件夹。它已经在您的 react-for-everyone 文件夹中

标签： reactjs webpack webpack-dev-server

【解决方案1】：

在scripts in package.json 中添加"dev": "./node_modules/.bin/webpack-dev-server --content-base" 并在react-for-everyone 文件夹中以npm run dev 运行您的webpack

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.*"
  }
}

【讨论】：

继续本教程系列这很好youtube.com/watch?v=MhkGQAoc7bc。

【解决方案2】：

您正在 ../node_module/.bin 文件夹中运行 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 上提供它。

【讨论】：

它在这个文件夹中也不起作用，webpack-dev-server 不被识别为内部或外部命令。检查这个Screenshot
实际程序 'webpack-dev-server' 仍然位于 ./node_modules/.bin 中，因此您必须在 react 中运行命令 ./node_modules/.bin/webpack-dev-server - 适合所有人的文件夹。还有另一个选项可以让它工作：全局安装 webpack-dev-server (npm i -g webpack-dev-server)。这允许您从任何文件夹运行 webpack-dev-server。见docs.npmjs.com/getting-started/installing-npm-packages-globally
谢谢，您为我提供了学习 React 的新方法...在全球范围内它不起作用，我稍后会探索它...