webpack

概述

案例

别名路径

react 项目中配置别名路径有下面两个作用，第一个作用路径解析配置要求插件 craco 配合试用，使用见 craco

安装并配置插件 craco 后在组件中导入本项目的其他依赖 import xx from '@/pages/...'

vscode 的联想配置需要我们手动在项目根目录创建名称为 jsconfig.json 的文件，vscode 会自动读取，内容如下

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    }
}

插件

craco

1. 安装 craco : npm i -D @craco/craco
2. 项目根目录下创建配置文件 craco.config.js
3. 配置文件中添加路径解析配置
4. 包文件中配置启动和打包命令（将 react 项目原本 package.json 中 script 下的启动和打包命令都替换为使用 craco） 原本是 "start": "react-scripts start" 需要修改为 "craco start"