相关疑难解决方法(0)

正如我写这样的webpack.config.js

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

在index.jsx我导入一个react模块App

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

我发现如果我将模块app命名为App.jsx,那么webpack会说index.jsx无法找到模块App,但是如果我命名为命名模块app App.js,它会找到这个模块并且运行良好.

所以,我对此感到困惑.在我webpack.config.js,我已经写test: /\.jsx?$/了检查文件,但为什么命名*.jsx无法找到？

我已经安装了eslint-config-airbnb,它应该为React预先配置ESLINT:

我们的默认导出包含所有ESLint规则,包括ECMAScript 6+和React.它需要eslint,eslint-plugin-import,eslint-plugin-react和eslint-plugin-jsx-a11y.

我.eslintrc扩展了它的配置:

{ "extends": "eslint-config-airbnb",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }],
    "react/no-multi-comp": 0,
    "import/default": 0,
    "import/no-duplicates": 0,
    "import/named": 0,
    "import/namespace": 0,
    "import/no-unresolved": 0,
    "import/no-named-as-default": 2,
    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
    "indent": [2, 2, {"SwitchCase": 1}],
    "no-console": 0,
    "no-alert": 0,
    "linebreak-style": 0
  },
  "plugins": [
    "react", "import"
  ],
  "settings": {
    "import/parser": "babel-eslint",
    "import/resolve": {
      "moduleDirectory": ["node_modules", …