このようにwebpack.config.jsを書くと
module.exports = {
entry: './index.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
};
そしてindex.jsx
私はreact
モジュールをインポートしますApp
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
let rootElement = document.getElementById('box')
render(
<App />,
rootElement
)
でモジュールアプリに名前を付けた場合App.jsx
、webpackは「index.jsx
モジュールApp
が見つかりません」と表示しますが、名前付きモジュールアプリに名前を付けた場合App.js
、このモジュールが見つかり、適切に機能します。
だから、私はそれについて混乱しています。私のではwebpack.config.js
、test: /\.jsx?$/
チェックファイルに書き込みましたが、なぜnamed *.jsx
が見つからないのですか?
rule
の下にリストされていたのmodule
...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }