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. 【Python基础】05_Python中的while循环

    1.程序的三大流程介绍 顺序 —— 从上到下,顺序执行 分支 —— 根据条件判断,决定代码的分支 循环 —— 让特定代码执行 2.while 基本语法 while 条件(判断 计数器 是否达到 目标次 ...

  2. Django-报错信息及admin后台汉化

    django-admin 汉化 效果对比 django admin 后台 报错信息 配置 修改配置文件中的 LANGUAGE_CODE 与 TIME_ZONE 即可. 将 django admin 后 ...

  3. gin获取全部参数

    原文链接:https://blog.csdn.net/keyunq/article/details/82226280 一直都是用结构体接收参数,假如事先不清楚参数名,或者参数是不固定的,就要动态获取. ...

  4. HTML form表单中action的正确写法

    我的Java Web Application的context是myweb,即http://localhost:8080/myweb/index.jsp是欢迎页. 现在我的一个Controller的映射 ...

  5. poj 1006中国剩余定理模板

    中国剩余定理(CRT)的表述如下 设正整数两两互素,则同余方程组 有整数解.并且在模下的解是唯一的,解为 其中,而为模的逆元. 模板: int crt(int a[],int m[],int n) { ...

  6. TPFanControl.ini

    TPFanControl.ini 64位系统安装目录分为两种 64位用:C:\Program Files 32位用:C:\Program Files (x86) 64位系统系统目录分为两种 64位用: ...

  7. python selenium4 模拟点击+拖动+保存验证码 测试对象+以验证码的返回ID保存命名 58同城验证码

    #!/usr/bin/python # -*- coding: UTF-8 -*- # @Time : 2019/12/5 17:30 # @Author : shenghao/10347899@qq ...

  8. 使用 pdb 进行调试

    使用 pdb 进行调试 pdb 是 python 自带的一个包,为 python 程序提供了一种交互的源代码调试功能,主要特性包括设置断点.单步调试.进入函数调试.查看当前代码.查看栈片段.动态改变变 ...

  9. js模糊查询案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. C++ STL 之 deque容器 打分案例(内含sort排序用法）

    #include <iostream> #include <vector> #include <time.h> #include <deque> #in ...