Webpack module d'entrée non trouvé (par tutoriel)

Question

Trouvé this tutorial (lié à la dernière page) sur Codecademy, a décidé d'essayer ce sens moderne du déploiement et la configuration des applications js (décidé d'essayer ReactJS)

étape par étape mise en oeuvre juste comme il a été dit, mais j'edened avec cette erreur (lorsque je tente de construire tout)

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

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 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]  
}; 

En plus 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" 
    } 
} 

J'ai pas la moindre idée ce qui est erroné ici. Comment venir?

Answer 1

On dirait la concaténation de chemin rate une barre oblique, essayez

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

La façon sans doute mieux serait cependant d'utiliser le module utilitaire path (https://nodejs.org/api/path.html) comme ceci:

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

Cette rend concaténation de chemin moins et est indépendant de l'OS sujettes à erreur (barre oblique inverse vs slash sur windows vs * os à base nix)