当我这样写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 App.jsx
,然后webpack会在index.jsx
中找到找不到模块App
,但是如果我在中命名了模块app App.js
,它将找到该模块并且运行良好。
所以,我对此感到困惑。在我的中webpack.config.js
,我写test: /\.jsx?$/
了检查文件,但是为什么*.jsx
找不到命名的文件?
rule
下上市,且smodule
...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }