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. Django-djangorestframework-异常模块-源码及自定义异常

    目录 异常模块 为什么要自定义异常模块 常见的几种异常情况 异常模块源码分析 自定义 drf 异常处理 异常模块 为什么要自定义异常模块 所有经过 drf APIView 视图类产生的异常,都可以提供 ...

  2. 第11章:使用Python打造MySQL专家系统

    1.Python语言高级特性 1).深入浅出Python生成器 1).生成器函数:与普通函数定义类似,使用yield语句而不是return语句返回结果.yield语句一次返回一个结果,在每个结果中间挂 ...

  3. 让 history 命令显示日期和时间

    echo 'HISTTIMEFORMAT="%F %T "' >> /etc/profile source /etc/profile

  4. 植物大战僵尸:寻找召唤僵尸关键CALL

    实验目标:通过遍历寻找召唤僵尸的CALL,通过调用CALL出现自定义的僵尸,加速僵尸的出现. 僵尸CALL的遍历技巧: 我们可以通过僵尸出现在屏幕中的个数来遍历寻找僵尸出现的CALL 首先打开CE-& ...

  5. Iedis - Redis 在IDEA中的可视化工具破解

    2.如何破解 // 如果你没有改动IDEA的话,IDEA的插件库在这个目录下C:\Users\Administrator\.IntelliJIdea2017.3\config\plugins\Iedi ...

  6. win10下搭建vue开发环境

    特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后 ...

  7. SQLException: #22001你知道这个错误码吗

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! java.sql.SQLException: #22001 java.sql.SQLException: #22001 a ...

  8. SQL Prompt 注册后隔一段时间莫名无法使用的处理

    https://blog.csdn.net/anyqu/article/details/88537197 以前一直以为是授权丢了,反复重装也解决不了 Sql Prompt---Unable to co ...

  9. [NOIP2018模拟10.15]比赛报告

    闲扯 昨晚又颓到好晚,Yali的降智光环感觉持续至今... 题面好评 T1T3都玩过 逃) T1没看多久就开始写二分+并查集 然后T3看着眼熟想了一个多小时...结果啥都没想出来 赶紧看T2发现还是没 ...

  10. css3控制字体动态变换颜色

    css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> ...