search

daily-interview / fe-interview

:smiley: 每日一道经典前端面试题，一起共同成长。
https://blog.csdn.net/u010494753
MIT License
172 stars 22 forks source link

webpack配置路径别名 #57

Open artdong opened 4 years ago

artdong commented 4 years ago

webpack配置路径别名

artdong commented 4 years ago

为什么需要配置路径别名

模块化开发项目中，比如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"),
    },

使用方法

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