Jak piszę webpack.config.js w ten sposób
module.exports = {
entry: './index.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
};
I index.jsx
importuję react
modułApp
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
let rootElement = document.getElementById('box')
render(
<App />,
rootElement
)
Stwierdzam, że jeśli nazwałabym aplikację module w App.jsx
, to webpack powie, że index.jsx
nie można znaleźć modułu App
, ale jeśli nazwałem aplikację module w App.js
, znajdzie ten moduł i będzie działał dobrze.
Więc jestem zdezorientowany. W moim webpack.config.js
, napisałem, test: /\.jsx?$/
aby sprawdzić plik, ale dlaczego *.jsx
nie można znaleźć nazwy ?
źródło
rule
wymienionych na liściemodule
...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }
Dodając do powyższej odpowiedzi,
Właściwość Resolution to miejsce, w którym musisz dodać wszystkie typy plików, których używasz w aplikacji.
Załóżmy, że chcesz użyć plików .jsx lub .es6 ; możesz szczęśliwie dołączyć je tutaj, a webpack je rozwiąże:
Jeśli dodasz rozszerzenia we właściwości resell , możesz je usunąć z instrukcji import:
Inne scenariusze, na przykład jeśli chcesz, aby skrypt kawy był wykrywany, powinieneś również skonfigurować swoją właściwość testową, na przykład:
źródło
Ze względu na czytelność i kodowanie typu „kopiuj-wklej”. Oto odpowiedź na Webpack 4 od komentarza pana rogersa w tym wątku.
źródło
Jak wspomniano w komentarzach do odpowiedzi z @max, dla webpacka 4 stwierdziłem, że muszę to umieścić w jednej z reguł, które były wymienione w module, na przykład:
źródło
Miałem do czynienia z podobnym problemem i byłem w stanie rozwiązać za pomocą właściwości rozwiązania .
Jak widać, użyłem tam .jsx, który rozwiązał następujący błąd
BŁĄD w ./src/app.jsx Nie znaleziono modułu: Błąd: nie można rozwiązać
W celach informacyjnych: https://webpack.js.org/configuration/resolve/#resolve-extensions
źródło
Sprawdź, czy plik bundle.js jest generowany bez błędów (sprawdź dziennik modułu uruchamiania zadań).
Otrzymałem komunikat „nie można znaleźć modułu, jeśli plik o nazwie jsx” z powodu błędu składni w html w funkcji renderowania komponentu.
źródło