1. 配置文件目录:

build>webpack.base.config.js:
resolve: {
  alias: {
    '@': resolve('src'),
    'styles': resolve('src/asset/styles')
  }
}

2. 于是一些长路径,如:

import '../../../../../../../styles/iconfont.css'  --> import 'styles/iconfont.css'
import '~@/assets/styels/header.css' --> import '~styles/header.css'

3. 修改配置文件,不会热更新,所以重启项目,免得老报错

webpack给目录起别名的更多相关文章

  1. webpack + ts 配置路径别名无死角方法总结

    webpack + ts 配置路径别名总结 自我体验加总结:在配置脚手架时,定制别名很有必要,可以使得代码更优雅,可读性更强.但在使用ts的时候,即便项目能够运行,vscode 确时长会提示 can' ...

  2. webpack之给目录起别名

    1. 配置文件目录: build>webpack.base.config.js: resolve: { alias: { '@': resolve('src'), //照猫画虎 'styles' ...

  3. 模板为webpack的目录结构

    目录结构 | -- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm ...

  4. Webpack, VSCode 和 Babel 组件模块导入别名

    很多时候我们使用别人的库,都是通过 npm install,再简单的引入,就可以使用了.     1 2 import React from 'react' import { connect } fr ...

  5. webpack run dev后并没有生成dist目录,但是浏览器里却读取了dist里的build.js?

    最近想看看现在做的React项目用的脚手架,看了下webpack的配置,尝试修改一些东西看看输出结果,结果允许npm run dev发现没有输出目录,怎么回事呢.又安装了vue官方提供的webpack ...

  6. 30分钟手把手教你学webpack实战

    30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...

  7. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  8. webpack实战

    webpack实战 30分钟手把手教你学webpack实战 2015-09-08 23:02 by 龙恩0707, 175 阅读, 0 评论, 收藏, 编辑 30分钟手把手教你学webpack实战 阅 ...

  9. 优化Webpack构建性能的几点建议

    Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位.在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程 ...

随机推荐

  1. 少儿编程Scratch第三讲:宇宙大战.枪战游戏

    小朋友这周的表现还算不错.周末多数时间都由我陪(bi)着(zhe)做课本上的数学题,后来还学了英语.任重道远啊,语数外都还得加强,还远不到自己就能取得好成绩的阶段. 上周说好这周要做一个发射炮弹的游戏 ...

  2. Task资料

    5天玩转C#并行和多线程编程:http://www.cnblogs.com/yunfeifei/p/3993401.html

  3. iview表单验证数字

    验证输入字符串必须为数字 html: <FormItem label="兑换积分:" prop="exchangeIntegral"> <In ...

  4. python3 多线程 采集 xpath

    #!/usr/bin/python # -*- coding: UTF-8 -*- '''Thread3 多线程测试采集''' import threading,time,queue,Mongo_ut ...

  5. [JZOJ100026]图--倍增

    [JZOJ100026]图--倍增 题目链接 太懒了,自行搜索 分析 裸倍增,不多说 \(fa[i][j]\)表示\(i\)跳\(2^j\)步走到的点 \(f[i][j]\)表示\(i\)跳\(2^j ...

  6. 连接Linux远程桌面的几个方法

    有下面五种方法: 一.通过xshell或putty直接调用程序窗口(通过ssh命令行连接). 二.通过xbrower连接Linux完整的桌面. 通过xshell直接调用程序窗口. rhel5的gdm的 ...

  7. EasyUI中的重要的控件和属性

    data-options: precision:2     保留2为小数 validType:

  8. 使用LEANGOO泳道

    转自:https://www.leangoo.com/leangoo_guide/leangoo_yongdao.html 列表使用纵向的纬度管理卡片,通常代表卡片的工作的不同阶段,或者任务的状态.泳 ...

  9. mORMot学习笔记3 数据集转Json

    usesSynCommons, SynDB, SynOleDB; procedure TForm1.DataToJsonClick(Sender: TObject); var Conn: TOleDB ...

  10. 十九,基于helm搭建EFK日志收集系统

    目录 EFK日志系统 一,EFK日志系统简介: 二,EFK系统部署 1,EFK系统部署方式 2,基于Helm方式部署EFK EFK日志系统 一,EFK日志系统简介: 关于系统日志收集处理方案,其实有很 ...