最近在使用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. uber shader

    shader 合在一起 用一些宏来控制 选哪部分编成一个想要的shader https://docs.unity3d.com/Manual/SL-MultipleProgramVariants.htm ...

  2. http://zhidao.baidu.com/link?url=fX6C1xFLsqiuTY88cjwJYal2x52rOwlJstmz7KWyMc6l9j3FHw2yhvp83timZ86pwhqQ8rONj2xkgo2wbU2tLK

    http://zhidao.baidu.com/link?url=fX6C1xFLsqiuTY88cjwJYal2x52rOwlJstmz7KWyMc6l9j3FHw2yhvp83timZ86pwhq ...

  3. Java笔记4:JDBC纯驱动方式连接Oracle

    JDBC纯驱动方式连接Oracle 1 下载Oracle提供的驱动程序包 下载地址: http://www.oracle.com/technetwork/database/enterprise-edi ...

  4. .Net使用程序发送邮件时的问题

    在做项目的时候,不可避免的会用到给用户发送邮件的问题,一开始我用的是qq的smtp服务器,但是会出错,不管账号密码,服务器地址端口等怎么配置都是出错.后百度之,发现可能是qq服务器本身就是禁止这个功能 ...

  5. nyoj237 游戏高手的烦恼(最小点覆盖)

    题目237 题目信息 pid=237" style="text-decoration:none; color:rgb(55,119,188)">执行结果 本题排行 ...

  6. rails generate model/resource/scaffold的区别

    If you’re just learning Ruby on Rails, you may be confused as to when to generate individual models, ...

  7. pip安装mysql报错 ld: library not found for -lssl

    ld: library not found for -lssl clang: error: linker command failed with exit code (use -v to see in ...

  8. HBase源代码分析之MemStore的flush发起时机、推断条件等详情(二)

    在<HBase源代码分析之MemStore的flush发起时机.推断条件等详情>一文中,我们具体介绍了MemStore flush的发起时机.推断条件等详情.主要是两类操作.一是会引起Me ...

  9. 哈希—— POJ 3349 Snowflake Snow Snowflakes

    相应POJ题目:点击打开链接 Snowflake Snow Snowflakes Time Limit: 4000MS   Memory Limit: 65536K Total Submissions ...

  10. python下载腾讯云慢日志并发送邮件附件

    这里没优化,只是对腾讯云下载慢日志,然后通过邮件发送出去 #!/usr/bin/env python # encoding: utf-8 import json import smtplib impo ...