Webpack mit mehreren Einträgen kann 'Datei' oder 'Verzeichnis' nicht auflösen

Question

Das ist das erste Mal, dass ich ein Webpack einrichte, und bisher bin ich nur verwirrt. Ich versuche, alle meine jsx Dateien in ihren jeweiligen Dateien zu sammeln, aber webpack scheint zu denken, dass sie nicht existieren ...

webpack --display-error-details

ich diese Fehlermeldungen erhalten, die wie so aussehen:

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./static/js/base in /Users/Maude/Projects/School/entry 
resolve file 
    /Users/Maude/Projects/School/entry/static/js/base.js doesn't exist 
    /Users/Maude/Projects/School/entry/static/js/base.jsx doesn't exist 
    /Users/Maude/Projects/School/entry/static/js/base is not a file 
resolve directory 
    /Users/Maude/Projects/School/entry/static/js/base/package.json doesn't exist (directory description file) 
    directory default file index 
    resolve file index in /Users/Maude/Projects/School/entry/static/js/base 
     /Users/Maude/Projects/School/entry/static/js/base/index doesn't exist 
     /Users/Maude/Projects/School/entry/static/js/base/index.jsx doesn't exist 
     /Users/Maude/Projects/School/entry/static/js/base/index.js doesn't exist 

Meine statische Dateistruktur sieht wie folgt aus:

static 
    |- js 
     |- base 
      |- base.jsx 
     |- classes 
      |- classes.jsx 
      |- locations.jsx 
     |- students 
      |- students.jsx 
      |- network.jsx 
     |- teachers 
      |- teachers.jsx 
    |- less 

Und schließlich meine webpack.config.js Datei:

module.exports = { 
    entry: { 
    base: './static/js/base', 
    classes: './static/js/classes', 
    students: './static/js/students', 
    teachers: './static/js/teachers', 
    }, 

    output: { 
    path: './static/bundles', 
    filename: '[name].js' 
    }, 

    devServer: { 
    inline: true, 
    port: 3333 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: '/node_modules/', 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    }, 

    resolve: { 
    modulesDirectories: ['/node_modules/'], 
    extensions: ['', '.js', '.jsx'], 
    }, 

} 

Warum erhalte ich Fehler wie ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory', wenn sie eindeutig dort sind? Hilf obi-wan!

Auch mein package.json:

{ 
    "name": "--", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "bower": "^1.7.9", 
    "gulp": "^3.9.1", 
    "gulp-bower": "0.0.13", 
    "gulp-changed": "^1.3.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-cssmin": "^0.1.7", 
    "gulp-html-replace": "^1.6.1", 
    "gulp-less": "^3.1.0", 
    "gulp-load-plugins": "^1.2.4", 
    "gulp-plumber": "^1.1.0", 
    "gulp-react": "^3.1.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-replace": "^0.5.4", 
    "gulp-shell": "^0.5.2", 
    "gulp-uglify": "^1.5.4", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

Answer 1

Ich glaube, Sie brauchen nur die einen Eintrag Datei, base.jsx, es sei denn, Sie eine zusätzliche Index-Datei in Ihrer Struktur haben.

webpack kriechen durch die Einfuhr und den Aufbau der Baumstruktur aus dieser

entry: './static/js/base.jsx' 

edit: für einen einzigen Eintrittspunkt Sie die Datei, die etwas wollen, wie hat: von

React.render(<App />, document.getElementById('app') 

Ihre packaged.json, sieht es so aus als könnte es index.js sein, wenn ja, dann setzen Sie webpack.config.js

entry: './index.js' 

Dann sollte webpack die gesamte react-App einbinden, indem man die import-Anweisungen befolgt, um die komplette Bundle-Datei zu erstellen.

btw. Es besteht keine Notwendigkeit, .jsx-Dateierweiterungen zu verwenden. Verwenden Sie einfach .js. Es bedeutet, dass Sie sich auch keine Gedanken über das Feld Erweiterungen im Webpack

btw2 machen müssen. Warum mischst du Schluck und Webpack? Nie zuvor gesehen. Vielleicht ist es besser, entweder die Route gulp/browsery zu gehen oder einfach beim Webpack zu bleiben.