为React组件创建一个更智能的Webpack自动加载器位于其目录中

问题描述

我真的可以和一个webpack专家一起帮助解释这是否可行。

这是我的目录清单：

components/
   Editor/
      Editor.jsx
      style.module.scss
   UIListing/
      UIListing.jsx
      style.module.scss

除了要在组件目录中解析的Webpack别名外，

resolve: {
    alias: {
      ['~']: `${path}/components/`
    },extensions: ['.js','.jsx']

因此，当我当前导入Editor时：

import Editor from '~/Editor/Editor

这对我很好。但是，有什么办法（无需将组件移出目录，我可以通过这种方式解决它？

import Editor from '~/Editor

解决方法

找到解决方案：

response()

Editor.jsx：

containers/
   Editor.jsx

components/
   Editor/
      Editor.jsx
      style.module.scss
   UIListing/
      UIListing.jsx
      style.module.scss

webpack.config.js：

import Editor from '../components/Editor/Editor'
export default Editor

不幸的是，它确实需要做一些额外的工作，但是在我的情况下，这证明是有用的，因为我有一个样板UI套件，需要轻松地从一开始就进行编码。

resolve: {
    alias: {
      ['~']: `${path}/containers/`
    },extensions: ['.js','.jsx']