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

【问题标题】：How to set 'src' to resource root in webpack?如何在 webpack 中将 'src' 设置为资源根目录？
【发布时间】：2020-07-14 11:27:51
【问题描述】：

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

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

我想用

import 'components/someComponent.jsx'

而不是

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

文件夹结构：

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

现在您的导入将如下所示

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

【讨论】：