webpack kann nicht Modul finden, wenn Datei mit dem Namen jsx

Question

Wie ich webpack.config.js wie diese

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

schreiben und in index.jsx importiere ich eine react Modul App

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

import App from './containers/App'; 

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

ich, wenn ich benannte Modul-App in App.jsx, dann wird Webpack in index.jsx sagen kann Modul App nicht finden, aber wenn ich benannte Modul-App in App.js benannt, wird es dieses Modul finden und gut funktionieren.

Also, ich bin verwirrt darüber. In meinem webpack.config.js habe ich test: /\.jsx?$/ geschrieben, um die Datei zu überprüfen, aber warum *.jsx kann nicht gefunden werden?

Answer 1

Webpack nicht weiß .jsx Dateien implizit zu lösen. Sie können in Ihrer App eine Dateierweiterung angeben (import App from './containers/App.jsx';). Ihr aktueller Loader-Test besagt, dass Sie den Babel Loader verwenden, wenn Sie eine Datei mit der Erweiterung jsx explizit importieren.

oder können Sie .jsx in den Erweiterungen enthalten, die ohne ausdrückliche Erklärung lösen WebPACK sollte:

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'], 
    } 
}; 

Für Webpack 2, lassen Sie die leere Erweiterung ab.

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

Answer 2

auf die obige Antwort Hinzufügen

Die Entschlossenheit Eigenschaft ist, wo Sie alle Dateitypen in Ihrer Anwendung Sie verwenden, hinzufügen müssen.

Angenommen, Sie .jsx oder .es6 Dateien können Sie glücklich sind sie hier und webpack lösen wird sie verwenden möchten:

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

Wenn Sie fügen Sie die Erweiterungen in der resolve Eigenschaft, die Sie aus der Importanweisung entfernen können:

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

Andere Szenarien wie wenn Sie Kaffee Skript soll erkannt werden, sollten Sie Ihre Test Eigenschaft als auch wie konfigurieren:

// 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'] 
    } 
}; 

Answer 3

Überprüfen Sie, dass bundle.js ohne Fehler erzeugt wird (siehe Info Aufgaben-Runner-Protokoll).

Ich bekam 'Kann Modul nicht finden, wenn Datei mit dem Namen jsx' aufgrund der Syntaxfehler in HTML in Component Render-Funktion.