如何在webpack中将'src'设置为资源根目录？

Question

我有一个React应用程序，使用自定义的Webpack配置（Webpack Encore）。

如何将“src”文件夹设置为资源根目录。
例如：

我想使用

import 'components/someComponent.jsx' 

取代

import '../../components/someComponent.jsx' 

文件夹结构：

1. -应用程序
2. --源代码
3. ---组件

- Nagy Hunor

Answer 1

你只需要在 webpack 配置文件中添加以下内容即可。

module.exports = {
 // ...
 resolve: {
  modules: [path.resolve(__dirname, 'app/src')]
 }
}

- Hein Htet Zaw

Answer 2

你可以创建一些别名，然后使用较短的路径。

let config = Encore.getWebpackConfig();
config.resolve.alias["~"] = path.resolve(__dirname, 'app/src');
module.exports = config;

现在你的导入将会像这样：

import SomeComponent from '~/components/someComponent.jsx'

- Zohaib Ijaz