如何在React Static Boilerplate中创建webpack导入别名

How do I create a webpack import alias in React Static Boilerplate?

本文关键字：创建 webpack 导入 别名 Boilerplate React Static      更新时间：2023-09-26

我有以下import:

// cwd: /project/pages/blog/category/red/index.js
import PageHeader from '../../../components/PageHeader';

我希望能够这样写（在我的项目中的任何地方）：

// cwd: /project/pages/blog/category/red/index.js
import PageHeader from 'components/PageHeader';

我尝试过使用webpack resolve选项，但似乎无法使其工作：

config.resolve = {
  alias: {
    components: [
      path.resolve('../components/')
    ]
  }
};

和

config.resolve = {
  root: [
    path.resolve('../')
  ]
};

我是不是错过了什么？

我的应用程序架构是从React Static Boilerplate派生而来的，所以我的webpack.config.js看起来像这个

config.resolve = {
  alias: {
    components: path.resolve('../components/')
  }
};

alias接受键值对，其中值的类型为string。我不确定它是否适用于数组。

要更具体地回答，最好知道PageHeader和webpack配置在哪里：

假设：

  • PageHeader在/project/pages/components中
  • 并且您的webpack配置处于根级别/project

那么你的决心会是这样的：

config.resolve = {
  alias: {
    components: path.resolve('./pages/components')
  }
};

同样，它取决于webpack配置和components目录的路径。path.resolve将相应地改变。

这个问题似乎与React Static Boilerplate有关，更具体地说，当构建静态页面时。

我找到了一个暂时解决问题的方法。我必须为别名准备一个~，这样它就不会被"处理"为node_module。。

config.resolve = {
  alias: {
    "~components": path.resolve(__dirname, '../components'),
    "~decorators": path.resolve(__dirname, '../core/scripts/decorators'),
    "~helpers": path.resolve(__dirname, '../core/scripts/helpers'),
    "~i18n": path.resolve(__dirname, '../core/i18n'),
  }
};

用法：

import fetch from '~helpers/fetch';
import header from '~components/header';

有关此Github问题的更多信息。

相关文章：