webpack ne trouve pas le module si le fichier nommé jsx

Au moment où j'écris webpack.config.js comme ça

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

Et dans index.jsxj'importe un reactmoduleApp

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

import App from './containers/App';

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

Je trouve que si j'ai nommé module app dans App.jsx, alors webpack dira in Ca index.jsxn't find module App, mais si j'ai nommé named module app in App.js, il trouvera ce module et fonctionnera bien.

Donc, je suis confus à ce sujet. Dans mon webpack.config.js, j'ai écrit test: /\.jsx?$/pour vérifier le fichier, mais pourquoi named *.jsxne peut pas être trouvé?

Webpack ne sait pas résoudre les .jsxfichiers implicitement. Vous pouvez spécifier une extension de fichier dans votre application ( import App from './containers/App.jsx';). Votre test de chargeur actuel indique d'utiliser le chargeur babel lorsque vous importez explicitement un fichier avec l'extension jsx.

ou, vous pouvez inclure .jsxdans les extensions que webpack doit résoudre sans déclaration explicite:

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

Pour Webpack 2, laissez l'extension vide.

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

Ajoutant à la réponse ci-dessus,

La propriété de résolution est l'endroit où vous devez ajouter tous les types de fichiers que vous utilisez dans votre application.

Supposons que vous souhaitiez utiliser des fichiers .jsx ou .es6 ; vous pouvez les inclure ici et webpack les résoudra:

resolve: {
  extensions: ["", ".js", ".jsx", ".es6"]
}

Si vous ajoutez les extensions dans la propriété de résolution , vous pouvez les supprimer de l'instruction d'importation:

import Hello from './hello'; // Extensions removed
import World from './world';

D'autres scénarios comme si vous voulez que le script de café soit détecté, vous devez également configurer votre propriété de test comme:

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};

Dans un souci de lisibilité et de codage copier-coller. Voici la réponse du webpack 4 du commentaire de mr rogers dans ce fil.

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}

Comme mentionné dans les commentaires sur la réponse de @max, pour le webpack 4, j'ai trouvé que je devais mettre cela dans l'une des règles répertoriées sous module, comme ceci:

{
  module: {
    rules: [ 
      {
        test: /\.jsx?$/, 
        resolve: {
          extensions: [".js", ".jsx"]
        },
        include: ...
      }
    ]
  }
}

J'étais confronté à un problème similaire et j'ai pu résoudre à l'aide de la propriété de résolution .

const path = require('path');
module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.join(__dirname,'public'),
        filename:  'bundle.js'
    },
    module : {
        rules: [{
            loader: 'babel-loader',
            test: /\.jsx$/,
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

Comme vous pouvez le voir, j'ai utilisé .jsx là-dedans qui a résolu l'erreur suivante

ERREUR dans le module ./src/app.jsx introuvable: Erreur: impossible de résoudre

Pour référence: https://webpack.js.org/configuration/resolve/#resolve-extensions

Vérifiez que bundle.js est généré sans erreur (consultez le journal de l'exécution des tâches).

J'obtenais `` Impossible de trouver le module si le fichier nommé jsx '' en raison de l'erreur de syntaxe en html dans la fonction de rendu du composant.