具有多個條目的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'錯誤時會收到諸如ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory'類的ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory'當它們明確存在時， ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ？ 幫幫我吧！

還有我的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應該通過遵循import語句構建整個bundle文件來引入整個react應用。

順便說一句 不需要使用.jsx文件擴展名。 只需使用.js。 這意味着您也不必擔心webpack中的擴展字段

btw2。 你為什么要混合口香糖和webpack？ 以前從未見過。 也許最好選擇“吞噬/瀏覽”路線，或者只是堅持使用webpack。