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

IT技术 reactjs webpack webpack-dev-server
2021-04-13 03:17:02

当我像这样写 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我导入一个reactmoduleApp

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

我发现如果我将 module app in 命名为 in App.jsx，那么 webpack 会说 in index.jsxcan't find module App，但是如果我将 named module app in 命名为App.js，它会找到这个module并且运行良好。

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

在此处输入图片说明

6个回答

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']
}
对于 webpack 4，我发现我需要把它放在下面rule列出的s 之一中module...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }
2021-05-26 03:17:02
@mrrogers 考虑将您的评论提升为答案:)
2021-05-26 03:17:02
非常感谢！我找了几个小时！
2021-06-03 03:17:02
@mrrogers 我到处找这个！先生，我向您致敬！
2021-06-15 03:17:02
谢谢@AlexanderVarwijk。好主意。我自己已经回到这些评论来记住我必须做的事情:)
2021-06-16 03:17:02

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

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}
准确地说是从 4.​​36.1 开始。这是文档webpack.js.org/configuration/module/#ruleresolve
2021-06-10 03:17:02

补充上面的答案，

该解决财产，你必须全部添加要使用在应用程序的文件类型。

假设您要使用.jsx 或 .es6文件；你可以很高兴地把它们包含在这里，webpack 会解决它们：

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

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

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

其他场景，例如，如果您希望检测到咖啡脚本，您还应该配置您的测试属性，例如：

// 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'] 
  }
};
在 WebPack 3.4 中，您不能使用值为空的 resolve.extension。这将导致编译异常：“无效的配置对象。Webpack 已使用与 API 架构不匹配的配置对象进行初始化。-configuration.resolve.extensions[0] 不应为空。”
2021-05-24 03:17:02

正如对@max 的回答的评论中提到的，对于 webpack 4，我发现我需要将它放在module下列出的规则之一中，如下所示：

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

验证是否正在生成 bundle.js 且没有错误（检查 Task Runner 日志）。

由于组件渲染函数中 html 中的语法错误，我收到“如果文件名为 jsx，则无法找到module”的消息。

其它你可能感兴趣的问题
上一篇如何在 React 中循环对象？ 下一篇如何访问父组件中子组件的引用