【React】配置 Alias 别名

自定义React项目Webpack配置

最新推荐文章于 2024-07-23 14:53:31 发布

原创最新推荐文章于 2024-07-23 14:53:31 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #alias #webpack #customize-cra

React 同时被 2 个专栏收录

4 篇文章

订阅专栏

webpack

2 篇文章

订阅专栏

本文介绍如何在React项目中使用customize-cra自定义Webpack配置，通过创建config-overrides.js文件并设置别名，实现对项目目录结构的优化。

在src根目录新建config-overrides.js自定义webpack配置。

安装 customize-cra

npm install customize-cra

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path')

module.exports = override(  
  addWebpackAlias({
    '@': path.resolve(__dirname, './src'),
    '@components': path.resolve(__dirname, './src/components'),
    '@utils': path.resolve(__dirname, './src/utils'),
  })
);