reactjs - Webpack Entry module not found (by tutorial) -

found this tutorial (linked last page) on codeacademy, decided try modern-way of deploying , configuring js apps (decided try reactjs)

step step implemented told, edened error (when try build everything)

error in entry module not found: error: can't resolve 'c:\users\temp1\documents\learn\reactjs\playaroundapp\index.html' in 'c:\users\temp1\documents\learn\reactjs\playaround' resolve 'c:\users\temp1\documents\learn\reactjs\playaroundapp\index.html' in 'c:\users\temp1\documents\learn\reactjs\playaround' using description file: c:\users\temp1\documents\learn\reactjs\playaround\package.json (relative path: .) field 'browser' doesn't contain valid alias configuration after using description file: c:\users\temp1\documents\learn\reactjs\playaround\package.json (relative path: .) no description file found no extension field 'browser' doesn't contain valid alias configuration c:\users\temp1\documents\learn\reactjs\playaroundapp\index.html doesn't exist .js field 'browser' doesn't contain valid alias configuration c:\users\temp1\documents\learn\reactjs\playaroundapp\index.html.js doesn't exist .json field 'browser' doesn't contain valid alias configuration c:\users\temp1\documents\learn\reactjs\playaroundapp\index.html.json doesn't exist directory c:\users\temp1\documents\learn\reactjs\playaroundapp\index.html doesn't exist

mine webpack.config.js:

/** webpack required stuff */ var htmlwebpackplugin = require('html-webpack-plugin');  var htmlwebpackpluginconfig = new htmlwebpackplugin({         template: __dirname + 'app/index.html',         filename: 'index.html',         inject: 'body',         minify: {             removecomments: true,             collapsewhitespace: true,             removeattributequotes: true         },         chunkssortmode: 'dependency'     });  /** thing traces stuff , transforms in teh better way babel(?) */ module.exports = {     entry: __dirname + '/app/index.js',     module:{         loaders:[             {                 test: /\.js$/,                 exclude: /node_modules/,                 loader: 'babel-loader'             }         ]     },     output:{         filename: 'transformed.js',         path: __dirname + '/build'     },     stats: {             colors: true,             modules: true,             reasons: true,             errordetails: true     },     plugins: [htmlwebpackpluginconfig]      }; 

as package.json:

{   "name": "playaround",   "version": "1.0.0",   "description": "just test prj",   "main": "index.js",   "scripts": {     "build": "webpack",     "start": "webpack-dev-server"   },   "author": "",   "license": "isc",   "dependencies": {     "react": "^15.6.1",     "react-dom": "^15.6.1"   },   "devdependencies": {     "babel-core": "^6.25.0",     "babel-loader": "^7.1.1",     "babel-preset-react": "^6.24.1",     "html-webpack-plugin": "^2.29.0",     "webpack": "^3.3.0",     "webpack-dev-server": "^2.6.1"   } } 

i got no clue whats wrong here. how come?

looks path concatenation misses slash, try

var htmlwebpackpluginconfig = new htmlwebpackplugin({         template: __dirname + '/app/index.html', ... 

the better way be, however, use path utility module (https://nodejs.org/api/path.html) this:

const path = require('path') ... template: path.join(__dirname, 'app', 'index.html') ... 

this makes path concatenation less error-prone , os independent (backslash vs slash on windows vs *nix based os)