1、首先说说我老姜对官方提供的demo的理解， 在理解的过程也学到了不少知识。

上图（图0）展示的官网demo的目录结构，node_modules是自己用node下载的， iconfont中是自己的离线图标这里不赘述，里面demo.*的都可以删除，那是给的样例，关于webpack基本配置的文件的知识客官你去百度就好，custom中是对图标路径变量的重新赋值，注意顺序， index.less是对ant样式文件的引用和变量文件的引用，没错这个可以和变量文件合并，到这已经对图标访问实现本地化了，只要 在使用icon前引用index.less就可以了，看似简单的已经实现了， 不过小编自己在一个坑里爬了一天才出来，这个坑就是webpack-dev-server这个小型服务器，框架是公司的，也是一点点排查发现的问题， 原因是这个服务器配置中把所有的路径的访问都返回了index.html（图2），这样实现离线图标的时候控制台就报错（图1），原因很明显因为返回的是index.html， 解决方法是在过滤的时候加个判断把访问iconfont资源的排除掉，解决方法如图3

react+webpack+wepack-dev-server的环境中ant design图标离线的方法的更多相关文章

  1. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

  2. 如何在Windows Server 2008 R2中更改桌面图标

    如何在Windows Server 2008 R2中更改桌面图标 Windows Server 2008 R2 已经在 MSDN 和 TechNet Plus 订阅上公布,gOxiA 在第一时间下载并 ...

  3. 使用Facebook的create-react-app脚手架快速构建React开发环境（ant.design，redux......）

    编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含compo ...

  4. es6环境中，export与import使用方法

    前言 参考自阮一峰大神的教程:http://es6.ruanyifeng.com/?search=export&x=6&y=5#docs/module#export-命令 声明:如有问 ...

  5. Mac OS X中Launchpad的图标添加删除方法（添加方法别试了，和Linux很大区别）

    说明:在Mac下的Launchpad图标添加和删除都与应用程序的app文件有关,如果单纯的只想在Launchpad添加自定义的图标,然后指定要某条命令运行时,建议不要这么干,Launchpad的图标管 ...

  6. 在 SharePoint Server 2016 本地环境中设置 OneDrive for Business

    建议补丁 建议在sharepoint2016打上KB3127940补丁,补丁下载地址 https://support.microsoft.com/zh-cn/kb/3127940 当然不打,也可以用O ...

  7. 利用webpack搭建的前端工程化环境

    随着webpack3.x的发布,其功能也越来越强大,很多的项目的编译打包工具也由gulp逐渐转移到webpack.最近因为项目重构考虑使用使用vue,同时想从原来的gulp切换到webpack,所以搭 ...

  8. （二）React Ant Design Pro + .Net5 WebApi：前端环境搭建

    首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...

  9. 在搭建tesseract-OCR环境中遇到问题和反省

    Tesseract,一款由HP实验室开发由Google维护的开源OCR(Optical Character Recognition , 光学字符识别)引擎,特点是开源,免费,支持多语言,多平台. 在搭 ...

随机推荐

  1. springboot activiti 整合项目框架源码 shiro 安全框架 druid 数据库连接池

     官网:www.fhadmin.org 工作流模块--------------------------------------------------------------------------- ...

  2. 关于redis常用命令

    加载redis.cof文件命令: redis-server /etc/redis/redis.conf启动redis命令: redis-cli -p 6379 关于key命令:keys * //查看所 ...

  3. golang中的字符串拼接

    go语言中支持的字符串拼接的方法有很多种,这里就来罗列一下 常用的字符串拼接方法 1.最常用的方法肯定是 + 连接两个字符串.这与python类似,不过由于golang中的字符串是不可变的类型,因此用 ...

  4. angular自定义过滤器在页面和控制器中的使用

    首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...

  5. 基于bootstrap的文本编辑器组件：Summernote

    Summernote官网地址 :https://summernote.org/ 这是官网的一个例子: <!DOCTYPE html> <html lang="en" ...

  6. 10 腾讯云、django2.0、uwsgi、mysql、nginx 部署

    1.腾讯云 操作系统 Ubuntu Server 16.04.1 LTS 64位 获取root权限 ubuntu@VM---ubuntu:~$ sudo passwd root Enter new U ...

  7. 3- 功能2：基于forms组件和ajax实现注册功能

    1.forms组件的注册页面 url from django.urls import path, re_path from blog import views from django.views.st ...

  8. P4211 [LNOI2014]LCA

    P4211 [LNOI2014]LCA 链接 分析: 首先一种比较有趣的转化是,将所有点到1的路径上都+1,然后z到1的路径上的和,就是所有答案的deep的和. 对于多次询问,要么考虑有把询问离线,省 ...

  9. java.util.Arrays.asList 的小问题

    JDK 1.4对java.util.Arrays.asList的定义,函数参数是Object[].所以,在1.4中asList()并不支持基本类型的数组作参数. JDK 1.5中,java.util. ...

  10. 指定路由器(DR/BDR)和非指定路由器(DROTHER)的区别

    一:名词解释 DR:designated router 指定路由器. BDR:backup designated router 备份指定路由器. 二:DR/BDR出现的缘由 在广播网和NBMA网络中, ...