帶多個條目的Webpack無法解析'文件'或'目錄'

Question

這是我第一次設置webpack，到目前爲止我只是感到困惑。我試圖收集所有的我的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應該通過遵循導入語句來構建完整的綁定文件，從而引入整個反應應用程序。

btw。沒有必要使用.jsx文件擴展名。只需使用.js。這意味着您也不必擔心webpack中的擴展字段

btw2。你爲什麼混合飲料和webpack？以前從未見過。也許更好的選擇吞噬/瀏覽器路線，或者只是堅持webpack。