WebPACKの入力モジュールが見つからない

Question

は（最後のページにリンクされている）、JSのアプリを展開および構成のモダンな通行を試してみることにした（ReactJSを試してみることにした）

ステップそれは言われただけのようにそれが、私はこのエラーをアップedened（私はすべてを構築しよう）

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 a 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 a valid alias configuration C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html.json doesn't exist as directory C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html doesn't exist

鉱山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 which traces stuff and transforms in teh better way with 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]  
}; 

と同様に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" 
    } 
} 

私はここにいないの手掛かりをいただきました！間違ってました。どうして？

Answer 1

パスの連結はスラッシュをミスのように、おそらくより良い方法は、このようpathユーティリティモジュール（https://nodejs.org/api/path.html）を使用するように、しかし、だろう

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

を試しルックス：

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

このパス連結のエラーを起こしにくく、OSに依存しない（バックスラッシュvsスニッシュvs * nixベースのOS）