如果文件名为 jsx，webpack 找不到模块 [英] webpack can't find module if file named jsx

问题描述

当我像这样写 webpack.config.js

As I write webpack.config.js like this

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

And in index.jsx I import a react module 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中命名了module app，那么webpack会在index.jsx中说can't find module App，但是如果我在 App.js 中命名命名模块 app，它会找到这个模块并且运行良好.

I find if I named module app in App.jsx, then webpack will say in index.jsx can't find module App, but if I named named module app in App.js, it will find this module and work well.

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

So, I'm confuse about it. In my webpack.config.js, I have writed test: /\.jsx?$/ to check file, but why named *.jsx can't be found?

推荐答案

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

Webpack doesn't know to resolve .jsx files implicitly. You can specify a file extension in your app (import App from './containers/App.jsx';). Your current loader test says to use the babel loader when you explicitly import a file with the jsx extension.

或者，您可以将 .jsx 包含在 webpack 应该解析的扩展中，而无需显式声明:

or, you can include .jsx in the extensions that webpack should resolve without explicit declaration:

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

For Webpack 2, leave off the empty extension.

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

这篇关于如果文件名为 jsx，webpack 找不到模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！