如果文件名为jsx，webpack无法find模块

当我写这样的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?$/来检查文件，但是为什么找不到名为*.jsx文件？

Answer 1

Webpack不知道隐式parsing.jsx文件。 您可以在应用程序中指定文件扩展名（ import App from './containers/App.jsx'; ）。 您当前的加载器testing说，当您显式导入带有jsx扩展名的文件时，使用babel加载器。

或者，您可以将.jsx包含在webpack应该parsing的扩展中，而不需要显式声明：

 module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] }, resolve: { extensions: ['', '.js', '.jsx'], } }; 

对于Webpack 2，请closures空的分机。

 resolve: { extensions: ['.js', '.jsx'] } 

Answer 2

除了上面的答案，

resolve属性是您必须添加您在应用程序中使用的所有文件types的位置。

假设您想要使用.jsx或.es6文件，您可以将它们快乐地包含在这里，webpack将解决它们：

 resolve: { extensions: ["", ".js", ".jsx" ".es6"] } 

如果您在resolve属性中添加扩展名，则可以从导入语句中删除它们：

 import Hello from './hello';// Extensions removed import World from './world'; 

其他情况下，如果你想咖啡脚本被检测到，你应该configuration你的testing属性，如：

 // webpack.config.js module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, module: { loaders: [ { test: /\.coffee$/, loader: 'coffee-loader' }, { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, resolve: { // you can now require('file') instead of require('file.coffee') extensions: ['', '.js', '.json', '.coffee'] } }; 

Answer 3

validationbundle.js正在生成没有错误（检查任务运行日志）。

由于组件渲染函数中html的语法错误，我得到'找不到模块，如果文件名为jsx'。