每次我必须导入一个Component时,我可以使用它的绝对路径:
import ProductDescription from '../../ProductDescription';
或在我的webpack.config.js
文件中定义别名:
alias: {
app: 'components/app',
home: 'components/home',
utility: 'components/common/utility',
textService: 'services/textService'
},
这样我就可以像这样导入:
import Home from 'home';
import Utility from 'utility';
现在显然,两者都很好,但两者都很糟糕。有没有办法递归配置我的webpack,以便它解析我的/src
目录中的所有文件?
我尝试使用modules
选项,如下所示:
modules: ['node_modules', 'src', paths.appNodeModules]
但是这次失败了。
答案 0 :(得分:0)
你可以这样做
在webpack配置
alias: {
components: 'components', // base path to components
},
在您的代码中
import Header from 'components/header'
import Footer from 'component/footer'
希望这有帮助!
答案 1 :(得分:0)
在src
文件夹中,您应该具有与此类似的结构:
src
└ scenes
├ components
│ ├ ComponentA
│ │ └ ComponentA.jsx
│ └ ComponentB
│ └ ComponentB.jsx
└ main
├ components
│ └ App
│ ├ components
│ │ ├ ComponentC
│ │ │ └ ComponentC.jsx
│ │ └ ComponentD
│ │ └ ComponentD.jsx
│ └ App.jsx
└ index.jsx
在您的webpack.config.js
中,您应该拥有以下内容(Webpack 3):
const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
...
let config = {
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
resolve: {
modules: ['components', 'node_modules'],
extensions: ['.js', '.jsx'],
plugins: [
new DirectoryNamedWebpackPlugin(true)
]
}
...
}
modules.exports = config;
由于使用上述配置和文件夹结构,webpack将以components
文件夹中的节点模块的相同方式递归搜索node_modules
个文件夹中的组件,并且您可以通过它们包含组件名。
E. g。在src/scenes/main/index.jsx
中你可以简单地写一下:
import App from 'App';
在src/scenes/main/components/App/App.jsx
中你可以写:
import ComponentC from 'ComponentC';
import ComponentD from 'ComponentD';
并且在src/scenes/main/components/App/components/CompoentC/ComponentC.jsx
中你可以写:
import ComponentA from 'ComponentA';
import ComponentB from 'ComponentB';
<强> P上。 S上。强>
我使用插件directory-named-webpack-plugin来允许webpack识别以其父文件夹命名的文件作为组件的默认入口点,因此在我的IDE选项卡中&#39;姓名我不会看到ComponentA/index.jsx
,ComponentB/index.jsx
,而是看到ComponentA.jsx
,ComponentB.jsx
。