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. 粒子群算法(PSO)

    这几天看书的时候看到一个算法,叫粒子群算法,这个算法挺有意思的,下面说说我个人的理解: 粒子群算法(PSO)是一种进化算法,是一种求得近似最优解的算法,这种算法的时间复杂度可能会达到O(n!),得到的 ...

  2. HDU 3461 思维+并查集

    Code Lock 题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=3461 Problem Description A lock you use has ...

  3. go语言操作kafka

    go语言操作kafka Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据,具有高性能.持久化.多副本备份.横向扩展等特点.本文介绍了如何使用Go语言发送和 ...

  4. 牛客 133D 挑选队友 (分治FFT)

    大意: $n$个人, 分别属于$m$个组, 要求选出$k$个人, 使得每组至少有一人, 求方案数. 显然答案为$\prod((1+x)^{a_i}-1)$的第$k$项系数, 分治$FFT$即可. #i ...

  5. mybatis基础小结

    1.JDBC是怎么访问数据库的?答:JDBC编程有6步,分别是1.加载sql驱动,2.使用DriverManager获取数据库连接,3.使用Connecttion来创建一个Statement对象 St ...

  6. 弹性盒模型display:flex

    Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...

  7. str.charAt()与str[]的区别

    str.charAt():只能显示当前字符,没有则显示空. str[]:当索引超出当前字符长度时,则显示undefined.

  8. Java学习路径(抛光砖)

    这就是我刚刚在五孔问答中找到的Java学习路线图抛光砖价格.我个人认为,这条Java学习路线是可以的.它是2018年相对较新的Java学习路线,更符合企业就业标准. Java学习路径的第一阶段:Jav ...

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

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

  10. 使用Google Thumbnails 压缩图片

    背景说明:最近项目中需要用到一些图片文件的上传 ,但是有些图片很大,比如轮播图,大有的有几兆,这样加载一个首页都要很久,显然这样对用户体验是非常不友好的,对服务器资源将是一种浪费. 为了解决这个问题, ...