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

Question

我有一个带有自定义 webpack 配置 (webpack-encore) 的 React 应用程序。

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

我想用

import 'components/someComponent.jsx' 

而不是

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

文件夹结构：

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

Answer 1

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

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

现在您的导入看起来像

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

Answer 2

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

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