webpack erkennt keine .jsx-Dateierweiterung

Question

In unserem Projekt versuche ich, alle unsere Komponenten zu refactorieren, um eine .jsx Dateierweiterung anstatt .js zu haben. Meine webpack.config.babel Datei sieht nun wie folgt aus:

import fs from "fs" 

const babelrc = JSON.parse(fs.readFileSync("./.babelrc")) 

export default { 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: "babel-loader", 
     query: babelrc, 
     exclude: /(node_modules|bower_components)/, 
     }, 
     { 
     test: /\.jsx$/, 
     loader: "babel-loader", 
     query: babelrc, 
     exclude: /(node_modules|bower_components)/, 
     }, 
     { 
     test: /\.json$/, 
     loader: "json-loader", 
     }, 
     { 
     test: /\.css$/, 
     loader: 'style-loader!css-loader', 
     }, 
    ], 
    }, 
} 

aber wenn ich versuche, import Main from './components/Main/Main'; in meiner Client.js-Datei auszuführen, es zeigt mir

Module build failed: Error: ENOENT: no such file or directory, open '/foo/src/components/Main/Main.js' 
@ multi babel-polyfill webpack-dev-server/client?/ webpack/hot/dev-server ./src/client.js 

Ich bin neu zu babel und Webpaket. Welche anderen Orte brauche ich, um die Dateierweiterung jsx zu registrieren?

Answer 1

Werfen Sie einen Blick in die Dokumentation für resolve.extensions: https://webpack.js.org/configuration/resolve/#resolve-extensions

Sie können die folgenden auf Ihre Webpack Config auch hinzufügen, um Dateien automatisch zu beheben mit dem .jsx Erweiterung durch die folgenden Config-Zugabe:

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

_{Btw, Sie können auch Ihre Laderkonfiguration optimieren, indem Sie den separaten Lader .jsx entfernen und den ersten Lader test für /\.jsx?$/erstellen}