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

问题

I'm real beginner in ReactJS. I need you help to set up webpack-dev-server for localhost:8080. I'm following this YouTube Tutorial to set it up, but I can't get success yet while in the tutorial its working. it sets root path as ../node_module/.bin and listed me files in it. It should set root as "react-for-everyone".

See Image to check file hierarchy, browser and command for the 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>

Kindly check and let me know the issues where I'm doing wrong.

回答1:

Add "dev": "./node_modules/.bin/webpack-dev-server --content-base" in scripts in package.json and run your webpack form the react-for-everyone folder as 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.*"
  }
}

回答2:

You are running webpack-dev-server command within the ../node_module/.bin folder therefore webpack-dev-server will serve this folder. You have to be careful where to use this command because it it aware of the folder it was started from.

To solve your problem move to G:\wamp\react-for-anyone and run ./node_modules/.bin/webpack-dev-server within this folder.

This should allow webpack-dev-server to find your index.html and serve it on http://localhost:8080.

来源：https://stackoverflow.com/questions/39912717/webpack-dev-server-is-setting-wrong-path-for-root-localhost8080

标签

reactjs

Webpack

webpack-dev-server