的WebPack錄入模塊不能（通過教程）

Question

找到this tutorial（鏈接到最後一頁）上codeacademy發現，決定嘗試部署和配置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

貌似路徑的級聯錯過了斜線，嘗試

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

的可能是更好的辦法是，然而，使用path實用模塊（https://nodejs.org/api/path.html）是這樣的：

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

這使路徑級聯更少容易出錯，並且與操作系統無關（在基於windows和* nix的操作系統上，反斜槓vs斜線）