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

Question

当我这样写 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 中命名了模块 app，那么 webpack 会在 index.jsx 中找不到模块 App 中命名，但如果我在 App.js 中命名了模块 --- ，它会找到这个模块并运行良好。

所以，我对此感到困惑。在我的 webpack.config.js 中，我写了 test: /\.jsx?$/ 来检查文件，但是为什么命名为 *.jsx 找不到？

原文由 qiuyuntao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Webpack 不知道如何隐式解析 .jsx 文件。您可以在应用程序中指定文件扩展名 ( import App from './containers/App.jsx'; )。您当前的加载程序测试表明当您显式导入具有 jsx 扩展名的文件时使用 babel 加载程序。

或者，您可以将 .jsx 包含在 webpack 应该在没有明确声明的情况下解析的扩展中：

 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，不要使用空扩展名。

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

原文由 max 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

为了可读性和复制粘贴编码。这是 rogers 先生 在此线程中评论的 webpack 4 答案。

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

原文由 Richard Vanbergen 发布，翻译遵循 CC BY-SA 4.0 许可协议