为React组件(嵌套在它们的目录中)创建一个更智能的Webpack自动加载器

Question

我真的可以请一位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

Answer 1

设计了一个解决方案：

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

编辑器.jsx:

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

webpack.config.js:

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

不幸的是，它确实需要一些额外的工作，但在我的情况下，这被证明是有用的，因为我有一个样板UI工具包，它需要从一开始就很容易获得编码。

import Editor from '~/Editor'