如果名为jsx的文件，webpack找不到模块

reactjs React.js

JimHarry

2020-03-12

当我这样写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找不到命名的文件？

在此处输入图片说明

第1135篇《如果名为jsx的文件，webpack找不到模块》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
Tony猿 2020.03.12

为了提高可读性和复制粘贴编码。这是罗杰斯先生在此主题中发表的webpack 4答案。

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}
Gil十三 2020.03.12

验证bundle.js是否已正确生成（检查任务运行器日志）。

由于组件渲染功能中html中的语法错误，我得到了“如果文件名为jsx则找不到模块”。

猿前端猿 2020.03.12

正如@max的答案评论中提到的那样，对于Webpack 4，我发现我需要将其放入模块下列出的规则之一，如下所示：

{
  module: {
    rules: [ 
      {
        test: /\.jsx?$/, 
        resolve: {
          extensions: [".js", ".jsx"]
        },
        include: ...
      }
    ]
  }
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android