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

Question

我有一个react应用程序，带有自定义的webpack配置(webpack encore(。

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

我想使用

import 'components/someComponent.jsx' 

而不是

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

文件夹结构：

1. -app
2. --src
3. ---组件

Answer 1

您所要做的就是在webpack配置中添加这样的内容。

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

Answer 2

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

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

现在你的进口看起来像

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