为什么需要配置路径别名

模块化开发项目中，比如vue和react等，经常需要import不同的js或者css模块到当前目录，那么如果路径比较深的话使用相对路径就比较麻烦，而且在文件迁移的时候，如果在不同的目录下边，又得改变以下引入的路径。所以我们可以使用webpack配置路径别名，在引入的时候我们直接使用这个别名，就可以正确的指向。

如何配置

在webpack.config.dev中的resolve下的alias属性做以下配置：

alias: {
      "@src":path.resolve("src"),
      "@components":path.resolve("src/components"),
      "@pages":path.resolve("src/pages"),
      "@utils":path.resolve("src/utils"),
    },

使用方法

• @src就可以指向到/src/

• @components指向到/src/components/

import Home from "@pages/home/home"
import userForm from '@components/form/user/user_form.jsx';

webpack添加路径别名后，vscode不能智能提示，如何解决？

添加jsconfig.json文件

{
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@app/*": ["app/*"],
        "@components/*": ["app/build/components/*"],
        "@common/*": ["app/build/common/*"],
        "@actions/*": ["app/build/actions/*"],
        "@enums/*": ["app/enums/*"],
        "@styles/*": ["app/build/style/*"]
      },
      "target": "ES6",
      "module": "commonjs",
      "jsx": "react",  // 重要！支持jsx文件，否则jsx文件无法跳转
      "allowSyntheticDefaultImports": true
    },
    "include": [
      "app/**/*"
    ],
    "exclude": ["node_modules"]
  }

注：

path 与 webpack配置的路径别名对应jsx 支持jsx文件

---

经典前端面试题每日更新，欢迎参与讨论，地址：

https://github.com/daily-interview/fe-interview

如果本文对你有用，请点个在看