React应用程序中src文件夹的Webpack别名？答案

【问题标题】：Webpack alias for src folder in React app?React应用程序中src文件夹的Webpack别名？
【发布时间】：2020-05-03 20:28:16
【问题描述】：

我想使用绝对导入来导入相对于根 src 目录的任何文件。这是我的文件夹结构：

example/
┣ public/
┃ ┣ index.html
┣ src/
┃ ┣ components/
┃ ┣ ┣ App.css
┃ ┣ ┣ App.js
┃ ┣ ┗ Todo.js
┃ ┣ api.js
┃ ┣ history.js
┃ ┗ index.js
┣ craco.config.js
┣ jsconfig.json

这是我的配置

var path = require("path");
module.exports = {
  resolve: {
    alias: {
      src: path.resolve(__dirname, "src"),
    },
  },
};

import Todo from "src/components/Todo"

但是我得到了这个错误。

Module not found: Can't resolve 'src/components/Todo' in 'C:\_MyFiles\Programming\example\src\components'

但是，如果我像这样更改配置并导入以引用 src 下的子文件夹，它会起作用...

var path = require("path");
module.exports = {
  resolve: {
    alias: {
      components: path.resolve(__dirname, "src/components"),
    },
  },
};

import Todo from "components/Todo"

我怎样才能让第一个变体工作，所以导入引用 src 文件夹而不是它的子文件夹？

【问题讨论】：

标签： javascript reactjs webpack create-react-app

【解决方案1】：

你可以使用：

resolve: {
  modules: [path.resolve('./src'), path.resolve('./node_modules')],
  extensions: ['', '.js', '.jsx']
}

这将为您的src 和node_modules 文件夹以及您的src 文件夹本身中的所有子目录创建一个别名。这样你就可以使用了

Import App from 'components/App'

和

Import history from 'history'

【讨论】：