Saat saya menulis webpack.config.js seperti ini
module.exports = {
entry: './index.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
};
Dan index.jsx
saya mengimpor react
modulApp
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
let rootElement = document.getElementById('box')
render(
<App />,
rootElement
)
Saya menemukan jika saya menamai aplikasi modul di App.jsx
, maka webpack akan mengatakan dalam index.jsx
modul tidak dapat ditemukan App
, tetapi jika saya menamai aplikasi modul dalam App.js
, itu akan menemukan modul ini dan berfungsi dengan baik.
Jadi, saya bingung tentang itu. Di saya webpack.config.js
, saya telah menulis test: /\.jsx?$/
untuk memeriksa file, tetapi mengapa nama *.jsx
tidak dapat ditemukan?
sumber
rule
s yang terdaftar di bawahmodule
...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }
Menambah jawaban di atas,
The tekad properti adalah di mana Anda harus menambahkan semua jenis file yang Anda gunakan dalam aplikasi Anda.
Misalkan Anda ingin menggunakan file .jsx atau .es6 ; Anda dapat dengan senang hati memasukkannya di sini dan webpack akan menyelesaikannya:
Jika Anda menambahkan ekstensi di properti selesaikan , Anda dapat menghapusnya dari pernyataan impor:
Skenario lain seperti jika Anda ingin skrip kopi terdeteksi, Anda harus mengonfigurasi properti pengujian Anda juga seperti:
sumber
Untuk kepentingan keterbacaan dan pengkodean salin-tempel. Berikut adalah jawaban webpack 4 dari komentar mr rogers di utas ini.
sumber
Seperti yang disebutkan dalam komentar pada jawaban dari @max, untuk webpack 4, saya menemukan bahwa saya perlu meletakkan ini di salah satu aturan yang tercantum di bawah modul, seperti:
sumber
Saya menghadapi masalah serupa, dan dapat menyelesaikannya menggunakan penyelesaian properti.
Seperti yang Anda lihat, saya telah menggunakan .jsx di sana yang menyelesaikan kesalahan berikut
EROR di ./src/app.jsx Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan
Untuk Referensi: https://webpack.js.org/configuration/resolve/#resolve-extensions
sumber
Verifikasi, bahwa bundle.js dibuat tanpa kesalahan (periksa Log Runner Tugas).
Saya mendapatkan 'tidak dapat menemukan modul jika file bernama jsx' karena kesalahan sintaks di html dalam fungsi render komponen.
sumber