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成长指北)

  • C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element(
    网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！intmain(){vectormyvec{3,
  • Vue3+Vite+TS+Axios整合详细教程 老马聊技术 VueViteTSvue.js
    1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个
  • 利用技术分享提升个人影响力 AI天才研究院 计算AI人工智能与大数据AI大模型企业级应用开发实战javapythonjavascriptkotlingolang架构人工智能大厂程序员硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLM系统架构设计软件哲学Agent程序员实现财富自由
    《利用技术分享提升个人影响力》关键词：技术分享、个人品牌、影响力、内容创作、互动反馈、持续成长摘要：本文将深入探讨技术分享在个人发展中的重要作用，通过详细分析技术分享的意义、平台选择、内容创作、互动反馈及个人影响力提升策略，帮助读者掌握利用技术分享提升个人影响力的实用方法。第一部分：引言与基础第1章：技术分享的意义与价值1.1.1技术分享的历史与发展技术分享作为一种知识传播的方式，其历史可以追溯到
  • Webpack5 多页面实践
    特性维度单页面应用-SPA多页面统一目录-MPA多页面单独部署-MPA入口数量单个，只有一个HTML文件多个，多个HTML文件多个，多个HTML文件，分别打包输出资源输出结构所有资源输出到统一目录（如js/,css/）所有页面的资源共用js/,css/等目录每页资源放在各自目录（如index/js/,index/css/）公共资源复用高：依赖打入主包或懒加载chunk，资源完全共享中：可通过spl
  • HarmonyOS赋能套件全景：示例代码，开启鸿蒙开发新世界
    目录一、引言：踏入鸿蒙开发大门二、HarmonyOS赋能套件初相识（一）什么是赋能套件（二）全景架构解析三、示例代码核心探秘（一）代码示例的丰富宝库（二）代码示例助力学习成长四、如何巧用示例代码（一）获取代码的正确姿势（二）融入实际开发流程五、开发者社区与支持同行六、结语：开启鸿蒙开发新征程一、引言：踏入鸿蒙开发大门在移动开发领域的激烈竞争中，HarmonyOS异军突起，迅速成为众多开发者关注的焦
  • AI 时代程序员的出路：高薪神话还能撑多久？ freewind 人工智能
    2025年，美国市场一名普通软件工程师的平均总包仍在15–16万美元/年，位居各行业顶薪之列BuiltInCoursera。可就在同时，71%的企业已经把AI写码模型引入生产线，近一半“用得相当激进”LegitSecurity——意味着写代码这件事，正在被机器半自动接管。下一个五年，程序员还能稳坐“金饭碗”吗？1|程序员为什么一直“贵”？原因解释稀缺性计算机教育普及赶不上互联网爆发，10年形成长期
  • go语言因为前端跨域导致无法访问到后端解决方案 雪花凌落的盛夏 Golang学习目录golang前端开发语言
    前端服务8080访问后端8081这端口显示跨域了ERRORNetworkErrorAxiosError:NetworkErroratXMLHttpRequest.handleError(webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14)atAxios.request(webpack-internal:///./n
  • 创客匠人：IP 变现背后的内容逻辑与创始人成长法则 创小匠 tcp/ip网络网络协议
    在知识付费行业蓬勃发展的今天，创始人IP已成为连接用户与商业的重要桥梁。创客匠人基于多年实践经验，总结出IP变现的核心在于内容的精准设计与创始人自身的价值输出，而非单纯依赖流量技巧。创始人IP打造的核心在于“关系模型”的构建。创客匠人观察到，成功的IP往往能清晰定义与粉丝的互动模式：专家型IP通过专业知识获得用户信赖，伙伴型IP通过共同成长凝聚社群，服务型IP通过问题解决建立粘性。这种关系的建立，
  • Python 生态发展之路 仓颉编程语言 技术文章python
    目录#Python是如何炼成的##生态系统持续扩张##Python开发的开源社区运作#更加广义的Python社区#广泛应用##Web开发、数据科学##不得不提的人工智能#支持Python成长的商业公司#Python成功之路小结##附：Python生态发展大事记#参考Python是现今最受欢迎的编程语言之一，2021年8月的TIOBE编程语言排行榜中，Python排名第二，仅次于C[1]。2017年
  • Pypandoc从入门到精通：全面指南与实用技巧 码界奇点 Pythonc++石墨文档ar
    欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。持续学习，不断总结，共同进步，为了踏实，做好当下事儿~非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。✨✨欢迎订阅本专栏✨✨TheStart点点关注，收藏不迷路文章目录PyPandoc详细使用指导1.PyPandoc简介与安装1.1什么
  • Python百大核心函数详解：从入门到精通的必备指南 码界奇点 Pythonpython开发语言python3.11数据分析青少年编程
    欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。持续学习，不断总结，共同进步，为了踏实，做好当下事儿~非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。✨✨欢迎订阅本专栏✨✨TheStart点点关注，收藏不迷路文章目录Python100个常用函数全面解析1.Python函数基础1.1什
  • Spring Boot 与消息队列：使用 RabbitMQ 进行消息的生产与消费！ bug菌¹ 滚雪球学SpringBootjava-rabbitmqspringbootrabbitmqspringboot集成消息队列
    本文精选收录于《滚雪球学SpringBoot》专栏，专为零基础学习者量身打造。从Spring基础到项目实战，手把手带你掌握核心技术，助力你快速提升，迈向职场巅峰，开启财富自由之路！无论你是刚入门的小白，还是已有基础的开发者，都能在这里找到适合自己的学习路径！  关注、收藏、订阅，持续更新中！和我们一起高速成长，突破自我！全文目录：前言目录1.SpringBoot与消息队列概述1.1什么是消息队列？
  • Web端版本更新提示--前端处理 扶我起来还能学_ 前端javascriptvue.js前端框架
    Web端版本更新提示–前端处理原理：webpack每次打包jshash值不同import{MessageBox}from'element-ui'letlastScripts=[]//最新一次js文件src名constDURATION=5*60*1000//设置5分钟检查更新一次//提取html中的script标签的src属性asyncfunctionextractNewScripts(htmlSt
  • 使用ENO将您的JSON对象生成HTML显示 土族程序员 jsonhtmljavascripteno前端
    ENO是简单易用，性能卓越，自由灵活开源的WEB前端组件；实现JSON与HTML互操作的JavaScript函数库。没有任何其它依赖，足够轻量。WEBPackNPM工程安装。npminstall@joyzl/eno然后在JS中引用import"@joyzl/eno";将JS实体对象填充到表单假设有一个如下的HTML表单TYPE1TYPE2通过以下代码将实体对象，设置到表单中，实体对象可以从服务器请
  • Unity Demo-3DFarm详解-其一 KhalilRuan unity游戏引擎
    我们来拆解一个种田游戏，这个游戏种类内部的功能还是比较模板化的，我们来一点点说。我们大体上分为这么几个部分：农场运营玩法角色与玩家互动物品与背包存档和进度管理用户界面系统农场运营可以大体上分为：种植系统：支持种植、成长、收获等完整的植物生命周期；动物系统：包含野生动物、家畜、宠物等，支持喂养、骑乘、驯养等功能；建筑与建造：玩家可以建造、升级、摧毁建筑；采集与合成：支持采集资源、合成物品、制作工具；
  • 「无痛成长」框架：用辩证思维搭建可持续变强的底层逻辑 默大老板是在下 表达想法思考人工智能学习经验分享重构
    核心前提：成长是「动态平衡系统」真正的成长既不是「苦熬式内卷」，也不是「躺平式摆烂」，而是在「自我突破」与「接纳现状」之间找支点——就像开发软件时既要迭代功能，又要兼容旧系统，最终形成一套轻量化、低内耗的「个人成长操作系统」。一、认知基石：3个「辩证成长观」（打破非黑即白）核心逻辑：成长的底层矛盾不是「选A还是选B」，而是「A与B如何协同」：「敢想」与「落地」的平衡术误区：要么空想「月入十万」却从
  • Java应届生的成长之路：从迷茫到坚定的蜕变 小羊没烦恼！ 职场和发展
    一、初入职场的那份忐忑还记得去年夏天，我拿着毕业证书和几份Java项目经验，站在校门口时的那种迷茫。面试官问"你的职业规划是什么"，我只能支支吾吾地说"想成为一名优秀的Java工程师"。那时的我，连SpringBoot的自动配置原理都说不清楚，更别提什么职业规划了。你是不是也正在经历这样的阶段？投了无数简历，参加了各种面试，却总觉得自己的技术不够扎实？别担心，每个Java大神都曾是个小白。二、我的
  • 【.NET】2024年ASP.NET Core开发者技能图谱：从基础到进阶的全景指南 JosieBook #Java全栈.netasp.net后端
    前言在.NET生态快速发展的今天，ASP.NETCore已成为构建高性能、跨平台Web应用的首选框架。无论是初入职场的开发者，还是希望技术升级的资深工程师，清晰的技能体系都是持续成长的核心。本文基于2024年最新ASP.NETCore开发者技能图谱，带您系统梳理从基础到架构师的能力框架，助您在技术浪潮中找准方向。大类细分项具体内容ASP.NETCoreBasics（ASP.NETCore基础）C#
  • 什么是个人品牌？定义、意义与核心优势 清风徐徐de来 知识管理内容管理内容中台产品运营用户运营
    个人品牌的定义个人品牌是一种通过网站、社交媒体和内容平台主动塑造的公众形象，旨在清晰传达你是谁、你做什么以及为何你正在做这些事情。这不仅涉及外在形象与风格，还包含你的价值观、技能、经验以及它们如何服务于目标受众。相比传统人设，个人品牌更强调影响力与长期信任的构建。个人品牌的战略意义个人品牌位于目标（Purpose）与身份（Identity）的交汇点，是passioneconomy中推动成长的核心力
  • Java零基础之自定义异常类！ 菜鸟不学编程 Java从入门到放弃java开发语言
    你好，欢迎来到我的博客！我是【菜鸟不学编程】  我是一个正在奋斗中的职场码农，步入职场多年，正在从“小码农”慢慢成长为有深度、有思考的技术人。在这条不断进阶的路上，我决定记录下自己的学习与成长过程，也希望通过博客结识更多志同道合的朋友。    ️主要方向包括Java基础、Spring全家桶、数据库优化、项目实战等，也会分享一些踩坑经历与面试复盘，希望能为还在迷茫中的你提供一些参考。  我相信：写作
  • Flow 数据流学习-冷流和热流 qq_39844788 学习
    文章参考的Kotlin学习笔记（五）——Flow数据流学习实践指北（一）-掘金Kotlin系列之认识一下Flow-掘金冷流（ColdFlow）：在数据被使用方订阅后，即调用collect方法之后，提供方才开始执行发送数据流的代码，通常是调用emit方法。即不消费，不生产，多次消费才会多次生产。使用方和提供方是一对一的关系。热流（HotFlow）：无论有无使用方，提供方都可以执行发送数据流的操作，提
  • React-Ts项目中配置路径别名@ wisuky 前端项目相关配置react.js前端前端框架
    方案一：配置webpack.config.js在react脚手架搭建的项目中，webpack.config.js配置文件是隐藏的，需要通过npmruneject打开，并且该操作是不可逆的，所以不建议使用该方案。方案二：使用craco库1.安装cracoyarnadd-D@craco/cracoORnpmi-D@craco/craco2.在项目根目录中创建craco.config.js配置文件，并添
  • Python Pandas库超详细教程：从入门到精通实战指南 stormsha Pythonpythonpandas开发语言python3.11数据分析
    欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐：「stormsha的主页」，「stormsha的知识库」持续学习，不断总结，共同进步，为了踏实，做好当下事儿~非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。✨✨欢迎订阅本专栏✨✨TheStart点点关注，收藏不迷路文章目录Pyt
  • c++文字游戏_闯关打怪2.0(开源) ༺ཌༀ 吃菠萝的小狼 ༀད༻ c++开源开发语言
    本次更新内容：1.增强对手性能2.可暂停（按N）3.修复些许bug4.增加boos关(第10、20、30...关)1.游戏概述本游戏是一个基于Windows控制台的回合制战斗游戏，采用俯视视角的2D平面设计。玩家控制角色"p"在13×25大小的封闭场景中与敌人"@"战斗，通过WASD移动，空格键发射炮弹，Enter键释放震爆弹技能。游戏采用关卡递增设计，每关BOSS血量会提升10%，具有简单的成长
  • 前端技术博客汇总文档 长路 ㅤ    文章目录汇总前端技术HTML5CSS3JavaScriptVue.js
    文章目录前言前端技术博客汇总链接基础知识点HTMLCSSJavaScript基础语法ES6语法扩展知识点Ajax&Fetch与跨域请求Canvas模块化WebpackNode.jsvite框架与实战VueVue.jsVue-routerVuexvue-cli(脚手架)微信小程序性能提升开源生态组件使用资料获取前言博主介绍：✌目前全网粉丝4W+，csdn博客专家、Java领域优质创作者，博客之星、阿
  • 【ELT.ZIP】OpenHarmony啃论文俱乐部——点燃主缓存压缩技术火花 ELT.ZIP 压缩算法harmonyos网络协议算法
    本文出自ELT.ZIP团队，ELTElite(精英)，.ZIP为压缩格式，ELT.ZIP即压缩精英。成员：上海工程技术大学大二在校生合肥师范学院大二在校生清华大学大二在校生成都信息工程大学大一在校生黑龙江大学大一在校生山东大学大三在校生华南理工大学大一在校生我们是来自7个地方的同学，我们在OpenHarmony成长计划啃论文俱乐部里，与华为、软通动力、润和软件、拓维信息、深开鸿等公司一起，学习和研
  • 【linux】ssh 远程执行命令自动输入密码方式 檀越@新空间 s5Linux学习linuxssh服务器
    欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。✨✨欢迎订阅本专栏✨✨博客目录一.自动输入密码二.sshpass方式1.安装sshpass2.源码下载3.安装过程4.验证三.expect方式1.脚本2.执行前些天发现了一个巨牛的人工智能
  • Vite 常用配置详解 啃火龙果的兔子 开发DEMO前端
    Vite是一个现代化的前端构建工具，相比Webpack具有更快的开发服务器启动和热更新速度。以下是Vite的常用配置项及其说明：1.基础配置(vite.config.js)import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importreactfrom'@vitejs/plugin-react'exportdefaultd
  • 《王者荣耀》游戏优化的AI革命：从性能提升到生态治理 AI编程员 001AI传统＆编程语言002AI编程工具汇总003AI编程作品汇总人工智能笔记学习深度学习游戏
    目录：AI技术进化历程：使用时间轴和表格介绍“绝悟”AI从基础操作到职业水平的成长过程，以及“开悟”平台的技术外溢效应。性能优化策略：通过终端适配方案表格，分析预计算烘焙、多线程优化等技术如何解决亿级用户的设备兼容问题。游戏环境治理：列举AI接管、违规检测等机制如何应对挂机、摆烂等破坏公平性的行为。产业技术外溢：说明游戏AI如何向智能制造、自动驾驶等领域输出协作决策模型。伦理争议：探讨“超规格能力
  • Java升级版的学生成长管理系统
    学生成长管理系统升级版需求为了学生管理系统书写一个登录、注册、忘记密码的功能。只有用户登录成功之后，才能进入学生管理系统中进行增删查改操作。分析登录界面System.out.println("欢迎来到学生成长管理系统");System.out.println("请选择操作1登录2注册3忘记密码");用户类属性：用户名、密码、身份证号码、手机号码注册功能用户名需求满足以下要求：验证要求：用户名唯一用
  • 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其他