为什么需要配置路径别名
模块化开发项目中,比如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
如果本文对你有用,请点个在看