Während ich webpack.config.js so schreibe
module.exports = {
entry: './index.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
};
Und in index.jsx
importiere ich ein react
ModulApp
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
let rootElement = document.getElementById('box')
render(
<App />,
rootElement
)
Ich finde, wenn ich die Modul-App in benannt habe App.jsx
, dann sagt Webpack in index.jsx
kann das Modul nicht finden App
, aber wenn ich die benannte Modul-App in benannt habe App.js
, findet es dieses Modul und funktioniert gut.
Also bin ich verwirrt. In meinem habe webpack.config.js
ich geschrieben test: /\.jsx?$/
, um die Datei zu überprüfen, aber warum *.jsx
kann der Name nicht gefunden werden?
quelle
rule
s setzen musste, die untermodule
...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }
Hinzufügen zu der obigen Antwort,
Die Entschlossenheit Eigenschaft ist , wo Sie alle Dateitypen hinzufügen müssen Sie in Ihrer Anwendung verwenden.
Angenommen, Sie möchten .jsx- oder .es6- Dateien verwenden. Sie können sie gerne hier einfügen und das Webpack wird sie lösen:
Wenn Sie die Erweiterungen in der Auflösungseigenschaft hinzufügen , können Sie sie aus der Importanweisung entfernen:
In anderen Szenarien, z. B. wenn Sie möchten, dass ein Kaffeeskript erkannt wird, sollten Sie Ihre Testeigenschaft wie folgt konfigurieren :
quelle
Im Interesse der Lesbarkeit und Copy-Paste-Codierung. Hier ist die Webpack 4 Antwort von Herrn Rogers Kommentar in diesem Thread.
quelle
Wie in den Kommentaren zur Antwort von @max für Webpack 4 erwähnt, stellte ich fest, dass ich dies in eine der Regeln einfügen musste, die unter Modul aufgeführt sind, wie folgt:
quelle
Ich hatte ein ähnliches Problem und konnte es mithilfe der Auflösungseigenschaft beheben .
Wie Sie sehen können, habe ich dort .jsx verwendet, das den folgenden Fehler behoben hat
FEHLER in ./src/app.jsx Modul nicht gefunden: Fehler: Kann nicht behoben werden
Als Referenz: https://webpack.js.org/configuration/resolve/#resolve-extensions
quelle
Stellen Sie sicher, dass bundle.js fehlerfrei generiert wird (überprüfen Sie das Task Runner-Protokoll).
Ich habe aufgrund des Syntaxfehlers in HTML in der Komponentenrenderfunktion die Funktion "Modul kann nicht gefunden werden, wenn die Datei jsx heißt" erhalten.
quelle