最近在使用react时发现路径用../../很不方便,特别是修改项目结构时,加减../都能改到吐血,

所有在网上找了半天webpack的配置,特此记录下

module.exports = (webpackConfig) => {
const config = Object.create(webpackConfig);
config.resolve = {
extensions: ['.js', '.jsx', '.json', '.scss', '.css'],
alias: {
'@': `${__dirname}/src/`,
'static': `${__dirname}/src/static/`,
'utils': `${__dirname}/src/utils/`,
'config': `${__dirname}/src/config/`,
'views': `${__dirname}/src/views/`,
'services': `${__dirname}/src/services/`,
'components': `${__dirname}/src/components/`,
'models': `${__dirname}/src/models/`
}
};
return config;
};

  

调用

import {arrayNullToString} from 'utils/help/ArrayHelp'

  

不用再../了!

react import改为绝对路径的更多相关文章

  1. react import 配置路径别名'@',简化import Component的方式

    摘要 在react中,大多数业务逻辑都组件化:极大的减轻了代码的冗余度,如果组件的层次比较深的话,组件的import就比较费劲,在import时使用“../../components/test”的方式 ...

  2. 未找到导入的项目,请确认 <Import> 声明中的路径正确

    当使用vs出现下列情况: D:\xxxx\Web\Web.csproj : error  : 无法读取项目文件“Web.csproj”. D:\xxxx\WebServiceManager\Web\W ...

  3. 请确认 <Import> 声明中的路径正确,且磁盘上存在该文件。

    在网上下了个源码打开报错. 请确认 <Import> 声明中的路径正确,且磁盘上存在该文件. 一查,原来是路径错误. 解决办法:将项目文件(.csproj)用记事本打开,然后找到<I ...

  4. 升级CUDA版本导致VS2010错误:未找到导入的项目XXX,请确认<Import>声明中的路径正确,且磁盘上存在该文件

    转自:http://www.cnblogs.com/yeahgis/p/3853420.html VS2010错误:未找到导入的项目XXX,请确认<Import>声明中的路径正确,且磁盘上 ...

  5. vs未找到导入的项目,请确认 <Import> 声明中的路径正确

    当使用vs出现下列情况: D:\xxxx\Web\Web.csproj : error  : 无法读取项目文件“Web.csproj”. D:\xxxx\WebServiceManager\Web\W ...

  6. React Native小白入门学习路径——五

    React Native小白入门学习路径--五 序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...

  7. 织梦dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法

    dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是:二级域名+图片地址,这是相对路径.但是你的图片是默认上传在uploads里面的.应该使用绝对路径.这 ...

  8. dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法

    dedecms5.7(织梦CMS5.7)二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法 dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是: ...

  9. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

随机推荐

  1. spring 动态定时任务

    功能介绍:商品自动上架.按修改或添加时设置的自动上架时间而启动定时任务 更改商品状态为上架. spring 中配置文件 <?xml version="1.0" encodin ...

  2. bootstrap popover 如何在hover状态移动到弹出上不消失

    bootstrap中的popover其实就是对tooltip做了一定升级,拥有了标题和内容 概要 使用的时候依赖第三方插件 依赖tooltip插件 必须初始化 title 和 content 可以在p ...

  3. Django——Django,uwsgi Nginx组合建站

    近来抽时间看了点关于python的资料,试着架设了下运行环境,于是写了本文记录之. 用到的软件: Django-1.6.1 uwsgi-2.0.7 python-3.3.3 nginx-1.7.7 安 ...

  4. mui 根据 json 数据动态创建列表

    使用 underscore.js 模块解析 Underscore提供了一个轻量级的模板解析函数,它可以帮助我们有效地组织页面结构和逻辑. 实例: <!DOCTYPE html> <h ...

  5. Objective-C(十七、KVC键值编码及实例说明)——iOS开发基础

    结合之前的学习笔记以及參考<Objective-C编程全解(第三版)>,对Objective-C知识点进行梳理总结.知识点一直在变,仅仅是作为參考,以苹果官方文档为准~ 十七.键值编码 K ...

  6. jQuery 文档操作 - insertAfter() ,insertBefore(),after(),before() 方法

    这个方法跟prependTo()和appendTo()不一样的地方在于,一个是仍然插入到元素内部,而insertAfter和insertBefore是插入到元素外部. 这里拿insertBefore来 ...

  7. node.js 学习01

    PHP开发技术栈(LAMP) Linux  Apache  MySql  PHPnode.js 全栈开发技术栈(MEAN): MongoDB  Express  Angular  Node.js 现阶 ...

  8. Linux 性能监控 —— Load Average

    一. 简单介绍 top. uptime. cat /proc/loadavg 命令中 Load average: 4.90, 5.51, 5.77        整体含义: 正在执行的任务数量 + 排 ...

  9. unity, 对于Debug.Log输出的log,可以双击定位到代码

    unity, 对于Debug.Log输出的log,可以双击定位到代码

  10. Atitit.跨语言反射api 兼容性提升与增强 java c#。Net  php  js

    Atitit.跨语言反射api 兼容性提升与增强 java c#.Net  php  js 1. 什么是反射1 1.1.       反射提供的主要功能:1 1.2.       实现反射的过程:1 ...