webpack配置别名alias
在webpack.config.js中,通过设置resolve属性可以配置查找“commonJS/AMD模块”的基路径,也可以设置搜索的模块后缀名,还可以设置别名alias。设置别名可以让后续引用的地方减少路径的复杂度。
一、常规webpack构建的项目
1、目录结构
- src
- utils
- utils.js
- config
- config.js
- main.js
- webpack.config.js
2、webpack.config.js
const path = require('path');
const resolve = dir => path.resolve(__dirname, dir); module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: resolve('dist')
},
resolve: {
// 设置别名
alias: {
'@': resolve('src')// 这样配置后 @ 可以指向 src 目录
}
}
};
3、config.js
import utils math from "@/utils/utils"; // 因为设置了alias,所以引入utils.js时候可以这样简写
....
二、vue-cli 2.0 在\build\webpack.base.conf.js文件下配置
三、vue-cli 3.0 在vue.config.js下配置别名alias
// 由于 Vue CLI 3 不再使用传统的 webpack 配置文件,故 WebStorm 无法识别别名 * 本文件对项目无任何作用,
// 仅作为 WebStorm 识别别名用 * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack,选择这个文件即可
const resolve = dir => require('path').join(__dirname, dir)
module.exports = {
resolve: {
alias: {
'@': resolve('src'),
'_c': resolve('src/components')
}
}
}
webpack配置别名alias的更多相关文章
- webpack配置别名alias出现的错误匹配
@(webpack) webpack是一款功能强大的前端构建工具,不仅仅是针对js,它也可通过各种loader来构建相关的less,html,image等各种资源,将webpack配合流程制定工具gu ...
- webpack 配置别名,解决 import 时路径查找麻烦的问题
在编写代码时,使用 import 导入别的文件,可能会遇到查找路径麻烦的问题 比如这里的 ../../ 还要去思考多少个 ../ 那么可以在 webpack 中,将 src 目录设置一个别名,方便文件 ...
- webpack中 resolve.alias 配置,@import相关踩坑
1.在使用webpack打包项目时,可以在配置文件中配置resolve.alias来定义一些绝对路径,方便在项目中灵活使用路径,举例如下: resolve: { extensions: [‘.js‘, ...
- webpack 使用别名(resolve.alias)解决scss @import相对路径导致的问题
webpack.conf.js 中 resolve.alias 配置 resolve: { extensions: ['.js', '.vue'], alias: { '@': path.resolv ...
- Nginx 核心配置-根目录root指令与别名alias指令实战案例
Nginx 核心配置-根目录root指令与别名alias指令实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.试验环境说明 1>.虚拟机环境说明 [root@nod ...
- 别名alias永久生效别名alias永久生效;虚拟机的NAT模式,进行静态IP配置,并A、B的实现免密访问
别名alias永久生效 1.打开cd /etc/profile.d 目录 新建文件my_alias.sh 2.my_alias.sh里面添加 alias p=’poweroff -h’ alias r ...
- 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- vue-cli中webpack配置详解
vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...
- vue-cli webpack配置 简单分析
vue-cli webpack配置分析 入口 从package.json可以看到开发和生产环境的入口. "scripts": { "dev": "no ...
随机推荐
- Codeforces Round #512 (Div. 2, based on Technocup 2019 Elimination Round 1) C. Vasya and Golden Ticket 【。。。】
任意门:http://codeforces.com/contest/1058/problem/C C. Vasya and Golden Ticket time limit per test 1 se ...
- Codeforces Round #340 (Div. 2) E. XOR and Favorite Number 【莫队算法 + 异或和前缀和的巧妙】
任意门:http://codeforces.com/problemset/problem/617/E E. XOR and Favorite Number time limit per test 4 ...
- cblas_sgemm cblas.h
BLAS(Basic Linear Algebra Subprograms)库,是用Fortran语言实现的向量和矩阵运算库,是许多数值计算软件库的核心, 但也有一些其它的包装, 如cblas是C语言 ...
- Ubuntu14.04(或Ubuntu16.04)安装openCV并测试python/C++
网上关于opencv的安装已经有了不少资料,但是没有一篇资料能让我一次性安装成功,因此花费了大量时间去解决各种意外,希望这篇能给一些人带去便利,节省时间. 1.安装OpenCV所需的库 1 sudo ...
- POJ 3666 Making the Grade(数列变成非降序/非升序数组的最小代价,dp)
传送门: http://poj.org/problem?id=3666 Making the Grade Time Limit: 1000MS Memory Limit: 65536K Total ...
- 【Linux-CentOS】CentOS安装Win双系统后Win启动项丢失及默认启动项修改
转载自:搁浅bky,有部分更正,建议看此文. 1.Windows启动项消失的原因: 在安装Win7.8/10系统+CentOS7双系统后,默认会将mbr(Main Boot Record)改写为g ...
- AngularJS 一 简介以及安装环境
AngularJS官网:https://angularjs.org AngularJS是开发动态Web应用程序的客户端JavaScript MVC框架.AngularJS最初是作为Google的一个项 ...
- 使用dva框架的总结
最近的项目是react+dva+atd+webpack的一个后台项目,刚接触dva就感觉很喜欢,很简洁用着很爽. 关于使用redux中的一些问题 1.文件切换问题. redux的项目通常哟啊分为red ...
- Restframework的版本及分页
1.版本 1.1基于url的get传参方式 1.创建django项目(起名我的是version),再创建一个app01应用 创建完成,通过python3 manage.py startapp api ...
- Django-rest-framework(一)简单入门使用
简单的使用 Django-rest-framework 建成DRF,可以帮助我们快速构建出 django的rest full 风格的api接口. 其源码容易理解,所以我们可以很方便的使用. 安装 pi ...