Boale_H
Boale_H

webpack成长指北第9章---webpack如何对icon字体进行打包

webpack成长指北第9章---webpack如何对icon字体进行打包

  • 前言
  • 下载icon图标
  • 项目目录
  • 项目代码

前言

在项目中，我们有时候会引入icon字体来实现一些图标的展示，但是之前文章有说过，webpack只识别js文件，那么如何对eot,ttf,svg,woff,woff2等类型的icon字体文件进行打包呢？

下载icon图标

我们可以先去阿里巴巴矢量图标库中下载所需要的icon图标
webpack成长指北第9章---webpack如何对icon字体进行打包_第1张图片
webpack成长指北第9章---webpack如何对icon字体进行打包_第2张图片
下载完成后获得这些文件
webpack成长指北第9章---webpack如何对icon字体进行打包_第3张图片

项目目录

webpack成长指北第9章---webpack如何对icon字体进行打包_第4张图片

项目代码

  • index.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 解决没有favicon.ico时报错GET http://localhost:9999/favicon.ico 404 (Not Found) -->
  <link rel="shortcut icon" href="#" />
  <link type="text/css" rel="styleSheet" href="./dist/css//main.css" />
  <title>webpack学习</title>
</head>
<body>
  <div>这是webpack学习</div>
  <div id="root"></div>
  <script src="./dist/main.js"></script>
</body>
</html>

  • 将下好的icon图标文件放到项目中
    webpack成长指北第9章---webpack如何对icon字体进行打包_第5张图片

  • 修改iconfont.css,将起文件引入改为相对路径
    webpack成长指北第9章---webpack如何对icon字体进行打包_第6张图片

  • index.js模块中引入iconfont.css

    import './src/assets/icon/iconfont.css';

const dom = document.getElementById('root');
const iconBox = document.createElement('div');
iconBox.className = 'iconfont icon-dianshita'
dom.append(iconBox);

  • 安装依赖
    之前我们说过，webpack默认只识别js文件，如果要处理css,以及eot,ttf,svg,woff,woff2等类型的icon字体文件，就需要考虑使用loader来处理这些文件
    其实打包字体文件和打包图片类似，我们需要安装file-loader和url-loader

    npm i file-loader url-loader -D

  • 配置webpack

    const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // webpack默认是将css打包到js中,如果需要将css打包成单独文件，则需要引入它

module.exports = {
  entry: {
    main: './index.js', // 指定当前目录的index.js为打包的入口文件
                       // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name
  },
  mode: 'development', // mode  指定打包模式（development（不会被压缩），production（这个模式的话代码会被压缩））
                       // development默认配置了sourcemap
                       // development默认无tree shaking配置，需要额外配置
  plugins: [
    new MiniCssExtractPlugin({   // 如果需要将css打包成单独文件，则需要引入它
      filename: './css/main.css', // 非必填，默认当前目录main.css，如指定路径和文件名可这样填写
      chunkFilename: '[id].css',  // 间接引入css的才会走chunk.filename
    }),
  ],
  module: {
    rules: [
      // 将css打包成单独文件
      {
        test:/\.css$/,
        use:[
            // 'style-loader',  // mini-css-extract-plugin是将css打包成独立的文件，而style-loader是将css以<style>标签的方式插入样式，彼此存在冲突,所以需要注释掉。
            // 'css-loader'     //将 CSS 转化成 CommonJS 模块
            // MiniCssExtractPlugin.loader, // mini-css-extract-plugin是将css打包成独立的文件的插件
            {
              loader: MiniCssExtractPlugin.loader, // mini-css-extract-plugin是将css打包成独立的文件的插件
              options: {
                publicPath: '../../' // 设置publicPath，这样css引用的背景图url就会以css所在的文件为基础
              }
            },
            {
              loader: 'css-loader', //将 CSS 转化成 CommonJS 模块
              options: {
                import: true, // 启用/禁用 @import 处理
                // modules: true // 代表样式的模块化打包，即哪个js引入了样式，哪个js才会受这个样式作用，其他js不受此样式文件影响
                              // 但是这样会造成样式文件打包后，类名会变成hash值，造成样式不起作用，因此如果设置modules: true，组件中设置类名的方式则需要做调整，根据css文件类名的变化而变化
              }
            },
            'postcss-loader'  // 在css3新特性下，我们是要添加浏览器厂商前缀的。如果没有浏览器厂商前缀，同一套样式不同浏览器展现的样式是不同的。
        ]
      },

      // 打包iconfont字体图标，和打包图片类似
      {
        test:/\.(eot|ttf|svg|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            esModule: false, // 新版本中esModule默认为true，会导致文件的地址变为[object Module],因此这里设置为false
            name: '[name]_[hash].[ext]', // 输出的文件名为[原名称]_[哈希值].[原后缀]
            outputPath: 'fonts/',       // 文件存储路径（output.path + 值）（物理路径, 存储路径）
                                        // 负责输出目录, 即打包后的写在磁盘的位置
            // publicPath: 'dist/fonts/',   // 输出解析文件的目录，url 相对于 HTML 页面（index.html所在文件夹的绝对路径 + 值）（文件引用路径就是看这个）
            //                             // 如果output设置了publicPath， options也设置了publicPath，优先以options的publicPath为主
            //                             // 是对页面引入资源的补充,比如img标签引入或者css引入等.
            //                             // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件
                                          // 一般只设置output的publicPath，方便统一管理
            limit: 1024                 // 限制当文件小于1KB的时候，就将文件转为base64存储于js中，以减少http请求次数，当文件大于1KB，则打包文件到指定目录，避免js过大
          }
        }
      },
    ]
  },
  output: {
    filename: '[name].js', // 打包后输出的打包文件的文件名，根据entry的chunk name作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename）
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
                                           // path值必须是绝对路径 ，所以引入path包，__dirname代表当前webpack.config.js所在文件夹的绝对路径
                                           // 整体路径为第一个参数+第二个参数，即__dirname + dist
                                           // 是所有输出文件的目标路径（物理路径, 存储路径）;                  
    publicPath: 'dist/'   // （url 相对于 HTML 页面所在文件夹的绝对路径 + 值）给output配置全局的publicPath，
                          // 这样各个loader打包出来的文件发布路径（引用地址）就是此全局publicPath + loader的options.outputPath
                          // （文件引用路径就是看这个）
                          // 是对页面引入资源的补充,比如img标签引入或者css引入等.
                          // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件
  }
}

  • package.json

    {
  "name": "09_webpack_icon",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "keywords": [],
  "author": "Boale_H",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.8.4",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "less": "^3.11.3",
    "less-loader": "^6.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^9.0.1",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

  • 执行npm run bundle打包，发现icon图标生效了
    webpack成长指北第9章---webpack如何对icon字体进行打包_第7张图片

你可能感兴趣的:(webpack成长指北)

  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 开心 蒋泳频
    从无比抗拒来上课到接受，感动，收获～看着波哥成长，晶晶幸福笑容满面。感觉自己做的事情很有意义，很开心！还有3个感召目标就是还有三个有缘人，哈哈。明天感召去明日计划：8：30-11：00小公益11：00-21点上班，感召图片发自App图片发自App图片发自App
  • 放下是一段成长的修行 小莳玥
    人来到这个世界上，只有两件事：生和死。一件事已经做完了，另一件你还急什么呢?是人，都有七情六欲。是心，都有喜怒哀乐，这些再正常不过了。别总抱怨自己活得累，过得辛苦。永远记住：舒坦是留给死人的。苦，才是生活；累，才是工作；变，才是命运；忍，才是历练；容，才是智慧；静，才是修养；舍，才会得到；做，才会拥有。人生，活得太清楚，才是最大的不明白。有些事，看得很清，却说不清；有些人，了解很深，却猜不透；有些
  • 2019-12-22-22:30 涓涓1016
    今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 这个世界为何对女性这么苛刻 遇见知见
    图片发自App当今社会的女性，简直用金刚侠来形容都不为过。虽然早已过了男尊女卑的时代，但是这个世界并没有平等的对待女性。新时代的女性标准：上得了厅堂，下得了厨房，杀得了木马，翻得了围墙，开得起好车，买得起新房，斗得过二奶，打得过流氓，生得了孩子，养得了家庭。这个社会对女性有太多的不公平，既要求女性经济独立，又要求女性贤良淑德。所有的女性的在成长过程中没有任何一项是因为你是女性而给你开绿灯的。图片发
  • 《在战“疫”中成长致敬生活》观后感 梅子刘的刀
    （作者：周晨）今天上午，我看了“我是接班人”网络大课堂《在战役中成长致敬生活》。有很多人拿出自己攒下的钱，默默地捐给了武汉，有几千块钱的、有几万块钱的，也有十几万块钱的。连小朋友也把自己的压岁钱捐给了武汉。有名环卫工人把自己五年的积蓄全部捐给了武汉。有名外卖小哥为医护人员买鞋子送吃的。还有已经治愈出院的新型肺炎病人捐了400毫升的血浆。还有位叫大树的叔叔，虽然他没有钱，但是他地里有蔬菜，捐了几大卡
  • 2022-08-28 蔚蓝一片晴
    初三暑假培训收获点滴从8月25至8月27日三天两晚的培训结束了，回到家中，该静下心来整理一下触动心灵的收获，成为成长的积淀。1.在优秀团队中快速成长与提升，做一名反思成长型教师一名专业型教师的教学指导包括了教学原理知识、案例知识、策略知识。面对教学中的遇到的有趣的情形、问题会去研究其理，寻找更好的教法学法对策。从新手到成熟型教师，再走向专业型教师，需要的是觉醒与反思，多进行案例研究，从案例中观察、
  • 开启你的思维成长之路 希思维
    图片发自App很多时候我们都羡慕别人家的孩子思维敏捷，记忆超强，脑回路清晰等，认为那些都是天生的能力，而自己要达到那样的境界几乎不可能，殊不知每个人都有一个强大的小宇宙，就看你是否找到了开启你思维小宇宙的方法。我们每个人的大脑都具有无限潜能，大部分人只开发出10-20%，还有很多潜力深埋于冰山底，而如何找到自己思维的动力呢?首先就是要了解我们神奇的大脑，从大脑神经元素，到神经回路的形成，知晓大脑思
  • 【347】脊梁式普通教师——《教育的100种可能（上）》（5） 向日葵_1f86
    用心是一节课，敷衍也是一节课，但是我们的尽心与否，很可能会改变一个孩子的人生轨迹。——李镇西学生张春银李镇西老师说：张春银不是“全国劳模”“特级教师”，但他真正代表了绝大多数的平凡教师、普通劳动者，这就是我要写张春银的原因。张春银老师是乡村教育的默默守望者，用他的爱守护着每一个孩子，上好每一堂课，用自己的青春去呵护孩子们的快乐成长。因为教育行走，我们也听到了更多乡村教师的故事，他们也都是用自己的爱
  • 辟谷日记 备谷6 玉衡_李俊晔
    备谷6图片发自App日期：18.1.31（周三）起床：7：30放假的日子，5：45的闹钟并没有关掉，每天也差不多这个点就朦朦胧胧醒了，有时不是真的醒了，就允许继续睡。今天似乎真的没什么睡意了——看来身体自然会有“够了”那个点，更加笃定：交托这词就是完完全全交托给身体，全然交托给宇宙，不需要任何评判，放下各种担心，恐惧，要求，内疚……在床上做逆转，思绪静不下来……知道成长就是做自己的主人，可以“掌控
  • 准备 胡珊珊乐平九小
    尊敬的各位领导、各位同仁们：大家上午好！我是来自乐平九小的胡珊珊。今天很高兴能有机会给大家做“智慧作业”应用培训。说到“智慧作业”我感触颇多，我是在智慧作业中成长起来的，我也时常以自己是一名“智慧作业人”自居。早在2020年疫情期间，学校电教处周光杰主任在学校群里发出智慧作业抢题通知，我看了有些心动，一节微课相当于一次省级公开课，这对于我们普通老师是多么难得的机会啊。但想归想，我也不会用软件啊，再
  • 到现在才发现自己有病 骑着大脑去南极
    原来人们真的喜欢对某一概念设限的，为什么这么说的，如果说工作，你可能在脑子浮现出的工作的大概印象就是被动的干着不喜欢的活，被动拿着那些微薄的工资的场景。但是也不排除可能把工作想成成长的样子的人，只是这种物种很少吧。就比如像病这个概念，大部分可能仅仅就把他局限在身体上出现的异常不舒服状况称之为病，直到近代才把病拓展到精神层面。。。最近才发现原来在精神层面上是有病的，原来曾经认为自己是一个无比健康的小
  • 阅读《认知觉醒》读书笔记 就看看书
    本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
  • 2021-11-18 安安303
    刘红雅中原焦点团队分享第135天筑基第4课社会心理学接上一课，心理现象。需要和动机所有的动机行为受需要的影响，现在的孩子很多方面不需要，是因为得到的太多需要使机体内部不平衡的状态，现在很多需要满足的过多，是“厌”，孩子要越用越有用，没有用到自己，自己没有价值感成就感，他就不需要开发自己的潜力。对自己和孩子的生活留白不断的学习成长，实现自己。所有有情绪的地方是触动了需求，需求没有被满足，当一个人知道
  • 自由职业态 2017/12/15 jojovicky
    比较适合我个人成长与发展期。为什么这么说，从小，家庭给予我相对自由的成长空间，长大后在学业与职业上也是给予自由。除了商科专业是家长提供建议外，其它专业是建立在个人兴趣与需要基础上。这是自己成为自由职业态与心态的由来。在各专业中不仅结识了同学朋友甚至成为今天的合作小伙伴。这也是奠定了自由职业态的基石。曾经为了平衡家庭孩子以及工作，我选择了进入学校当一名老师，特此感谢我的老板（伯乐）和先生以及家人给予
  • 线上分享会感悟（关于教育） 猫咪小妖的城堡
    未来的理想的教育，是细化到个人的。即，关注每个人的成长，个人的优势发展。教师需要做的，是营造足够好的氛围，提供足够多的支。每个孩子都是一颗种子，老师是园丁，提供营养的土壤，悉心呵护，浇水，施肥，修剪，给予恰当的引导，种子自然会依照本性，长成自己的样子。世界因此而美好，多姿多彩。教育，是连接到本人，对人本心的沟通。从表面上的一个点（一个行为），深究到背后的动机，而非简单的评判与术的运用。这涉及到心理
  • 不想长大 刘奶奶的花茶
    回忆若是泥沼，成长应是破泥出落的洁莲。人是爱回忆的动物，回忆以前过得有多美好，未来的路是多了一丝勇气还是少了一份动力？每个人的答案各异。因为每个人对待过去的态度不一样，背上的故事不一样，谁也没资格说谁的选择，立世而言，最清醒的是离开人群坦荡卸掉各种角色的自己。你说你相信童话，白雪公主会遇到善良的小矮人，等到真爱的王子；阿狸告诉桃子那个分针和时针的故事是他们未来的写照；哆啦A梦的口袋里还是装着稀奇古
  • 收获的日子 YCH花朵儿
    今天是个收获的日子，是个信心满满的日子，是个我下决心需要改变的日子，因为今天我加入了:正能量满满的锦明老师的亲子大家庭，以后的日子我们晨昏相伴共同进步，我会跟着群主认真学习，感悟，分享，让自己和孩子一起成长！
  • 2019-5-29日精进 冰女孩
    今天车辆进厂不少，天气炎热，大家都是没怎么闲着。每天工作量都不同，随时会发生不同的变化。能够在工作中不断的成长，其实多干一点也没什么，嘴笨点就得多勤快点，不能那头都不好。只要付出了，就会有回报。
  • 天上的每颗星星 都是殉难者的生命 摘到月亮了吗
    1.“小孩怎么一见到哥哥就脸红”——《偷偷藏不住》2.“娶她是我高中就认定的事”──《痛仰》3.“他扛下一切风雨先你一步成长然后来宠你他真的好喜欢你”——《偏偏宠爱》4.天上的每颗星星都是殉难者的生命——耳东兔子5.未经允许擅自特别喜欢你不好意思了——《默读》6.“许星纯你猜我在干嘛我在等风等风热吻你”——《等风热吻你》7.“我爱你如鲸向海似鸟投林不可避免退无可退”——陆霆骁《许你万丈光芒好》8.
  • 承担即成长 吉林付巍巍
    《苏霍姆林斯基教育学》课程，几天前召开了义工培训会，我听了回放后主动联系郑老师要求加入义工团队。虽然这样每周要付出至少一天的时间进行打卡阅读和点评，但这样可以强迫规划好每日的作息时间，完成专业阅读方面的学习，这种重要的事情是必须要融入日常的生活中的，这一工作的申请也督促我合理安排自己的时间，把碎片化的时间整合好，无形中提高了每日利用时间的效率。上学期跟随着教师阅读地图课程组进行点评，发现了许多优秀
  • 思考成长 丁昆朋
    这篇文章是加紧赶出来“应付”日更，一方面不想要再晚睡了；另一方面不想失去日更达人的称号，只能坐下来匆忙写下一点文字。既然标题是成长，先来总结一下这段时间的收获：1、整理箱子站着可以看电脑，坐着反而是一种享受，减少了坐着腰酸背痛的现象；2、使用讯飞输入法大大增加自己的输出量；3、Anaconda+“pythontutor.com"+Google算是简单入门python；4、英语的阅读文章能力、听力提
  • python实现规则引擎_规则引擎python weixin_39601511 python实现规则引擎
    广告关闭回望2020，你在技术之路上，有什么收获和成长么？对于未来，你有什么期待么？云+社区年度征文，各种定制好礼等你！我正在用python编写日志收集分析应用程序，我需要编写一个“规则引擎”来匹配和处理日志消息。它需要具有以下特点：正则表达式匹配消息本身消息严重性优先级的算术比较布尔运算符我设想一个例子规则可能是这样的：(message~program:messageandseverity>=h
  • 2022-5-23《儿童纪律教育》培训 手捧鲜花_54e3
    张子博春蕾八幼缺乏技能导致的问题，需要老师和家长教授儿童所需要的锻炼的技能。比如教授儿童如何处理情绪、与人相处以及有效的交流技巧。未满足的情感需要，如信任、尊重、爱与权利的需要，都应该让儿童充分得到满足时，才能解决问题。家庭互动与复杂的原因，需要教师建立以家庭为中心的实践，和家庭沟通，建立和谐的关系，为孩子的健康成长共同努力。
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • 童年 九 上 Y于生
    我把自己的童年时代比喻成蜂巢，形形色色平凡又普通的人们如同蜜蜂，把各自采集到的生活和知识的蜂蜜源源不断地输送给我，为我的成长提供丰富的养料。尽管这养料又脏又苦，但只要是知识，它就是蜂蜜，虽苦犹甜。自从“好极了”离开后，我又跟彼得大叔成了好朋友。他长得很像外公，瘦削、利落，收拾得干干净净，只是整个人都比外公小一号。他就像一个专门为逗人乐而装扮成老头儿的调皮孩子，他的脸像由无数根细条编成的鸟笼子，在这
  • 动画电影《心灵奇旅》教你怎么做人，皮克斯为全人类上了一课 韩漫小说
    皮克斯出品，必属精品。不知从什么时候，这句话成了中国影迷和动画迷对皮克斯的认可和肯定。作为八十年代的人，虽然现在已经迈入中年，但是从小就对动画片十分痴迷。从《奥特曼》到《高达》，从《黑猫警长》到《海贼王》。动画伴我成长，给了我很多快乐。接触皮克斯的动画，是《玩具总动员》，看了真的令人感动。这不仅是儿童的欢乐片，也是给八零九零后奉献的精美大作。然而这一次的《心灵奇旅》，更是让我对皮克斯刮目相看。这次
  • 《怦然心动》：家庭环境会塑造人物性格 墨香Connie
    《Flipped》，与其说这是一本关于初恋的故事，不如说这是一部关于人生的教科书。作者分别从男女主人公的视角阐述他们从相遇到相知的成长过程，将男女认知的差异直白地铺设在读者面前。Juli的一见钟情，对Bryce来说是不知所措；Juli的执着相守，对Bryce来说是痛苦的纠缠；Juli的善意提醒，对Bryce来说是多此一举......这就是成人世界的缩影，多少善意消磨在了误解、懦弱与对抗中；故事我们
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他