Webpack с множественными записями не может разрешить «файл» или «каталог»

Question

Это моя первая настройка веб-пакета, и до сих пор я просто смущен. Я пытаюсь собрать все мои JSX файлы в соответствующих файлах, но WebPack, кажется, думают, что они не существуют ...

webpack --display-error-details

Я получаю это ошибки, которые выглядят как так:

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 

Моя статическая структура файла выглядит следующим образом:

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

И наконец мой файл webpack.config.js:

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'], 
    }, 

} 

Почему я получаю ошибки, такие как ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory', когда они явно там? Помощь obi-wan!

Также мой 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

я думаю, что вам нужен только один файл ввода, base.jsx, если у вас есть дополнительный индексный файл в вашей структуре.

WebPack будет ползти по импорту и создать структуру дерева из этого

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

редактирования: для одной точки входа вы хотите файл, который имеет что-то вроде:

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

от вашего packaged.json, похоже, это может быть index.js, если это так, то вы помещаете в webpack.config.js

entry: './index.js' 

, тогда webpack должен вытащить все приложение для реагирования, выполнив инструкции импорта для создания полного файла пакета.

кстати. нет реальной необходимости использовать расширения .jsx. Просто используйте .js. Это означает, что вам также не нужно беспокоиться о расширении поля в webpack

btw2. почему вы смешиваете gulp и webpack? Никогда не видел этого раньше. Может быть, лучше пойти либо по маршруту глобализации, либо просто вставить веб-пакет.