最近在使用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. js同比例缩放图片

    function DrawImage(ImgD, FitWidth, FitHeight) { var image = new Image(); image.src = ImgD.src; if (i ...

  2. unity 的视锥剔除和遮挡剔除

    Regular frustum culling only renders objects within the camera’s view. This is automatic and always ...

  3. 通过ssh上传文件到目标主机

    需要通过ssh上传文件到目标主机上,之前一直时通过ssh客户端来传文件的,这次因为本地没装客户端,所以考虑直接用终端通过ssh连接主机进行文件传输. 只需要一条命令就可以了: scp  ./serve ...

  4. [Functional Programming 101] Crocks.js -- when to use map and when to use chain?

    As a beginner of Crocks.js, it was a problem for we to figure out when to use .map() and when to use ...

  5. NSDate 问题

    类型 比特数 有效数字 数值范围 float 32 6-7 -3.4*10(-38)-3.4*10(38) double 64 15-16 -1.7*10(-308)-1.7*10(308) long ...

  6. 判断一个字符串是否为合法IP

    输入任意一个字符串,判断是否为合法IP bool IsIPAddress(const char * str){ //先判断形式是否合法, //检查是否只包含点和数字 ; str[i] != '\0'; ...

  7. 用JDOM读取XML文件

    用JDOM读取XML文件需先用org.jdom.input.SAXBuilder对象的build()方法创建Document对象,然后用Document类.Element类等的方法读取所需的内容.IB ...

  8. (三)Oracle学习笔记—— sql语句

    0. scott 用户默认表介绍 scott用户Tables目录下包含四张表 1. insert(插入)语句 给指定列插入数据: ,'xx'); 插入全部列数据: ,'xx','lll'); 2. u ...

  9. How to learn a new technology

    是什么?为什么会出现? 这一阶段主要是对该技术有一个整体了解,他所解决的是什么问题,他的整体结构等. 怎么做? 最简单的是找一个上手视频,因为视频是非常直观的展示了技术的使用.先学会用是最根本的,对于 ...

  10. 利用pandas进行数据分析之ndarray结构

    Numpy的重要特点就是其N维数组对象, 1.ndarray每个元素是相同的,每个数组都有一个两个对象: .shape:用于表示维度大小的元组 .dtype:用户表示数组类型的对象 2.创建数组 ar ...