All geek questions in one place

Webpack-dev-server sets the wrong path for root localhost: 8080

I really start at ReactJS. I need you to help set up a webpack-dev server for localhost: 8080. I am following this YouTube Tutorial to set it up, but I still cannot succeed while his tutorial is working. it sets the root path as .. / node _module / .bin and lists me the files in it. He must establish the root as "respond to all."

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

Please check and inform me about problems in which I am mistaken.

+5
source share
2 answers

Add "dev": "./node_modules/.bin/webpack-dev-server --content-base" to the scripts in package.json and run your web package in 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
source

You use the webpack-dev-server command in the .. / node _module / .bin folder, so webpack-dev-server will serve this folder. You must be careful where to use this command, because it knows about the folder from which it was run.

To solve your problem, go to G: \ wamp \ react-for-someone and run ./node_modules/.bin/webpack-dev-server in this folder.

This should allow the WebPack-DEV server to find its index.html and feed to http: // localhost: 8080 .

0
source

Source: https://habr.com/ru/post/1257839/

More articles:


All Articles