blog icon indicating copy to clipboard operation
blog copied to clipboard

记录平时的工作学习和一些思考

Results 6 blog issues
Sort by recently updated
recently updated
newest added

> 在专栏课程里,关于 CSS 内联这部分没有进行演示。今天就再系统的介绍下 Webpack4 里面资源内联(HTML/CSS/JS/Image/Font)的正确姿势吧! 首先,我们一起了解下什么是资源内联。 # 什么是资源内联? 资源内联(inline resource),就是将一个资源以内联的方式嵌入进另一个资源里面,我们通过几个小例子来直观感受一下。 HTML 内联 CSS,这个其实就是我们通常说的 内联 CSS 或者 行内 CSS。我们可以写几行 reset CSS,然后通过 `style` 标签的方式嵌入进了 HTML 里面: ``` Document * { margin:...

webpack

> Mac OS 做为前端开发者的首选操作系统相信大家再熟悉不过了,在电脑主界面的底部可以看到各种各样的应用程序图标。比如:App Store、Safari 浏览器、照片、短信等等。使用 Electron 开发时我们也会发现有一个默认的图标,但总感觉这个图标不够酷。那么,我们要如何自定义 Dock 图标呢? # Dock 介绍 Dock 是 Mac OS 电脑主界面底部的应用程序集合,可以理解成 windows 下的桌面快捷方式。通常,我们会把比较常用的软件锁定在 Dock 下,便于快速找到和使用它们。 ![1](https://user-images.githubusercontent.com/18289264/66185724-df834500-e6b2-11e9-8921-ef1ba620554c.png) # Dock 图标 Dock 图标在 UI 上总共包括两方面的内容:图标...

electron

老师我之前在学习第33课的时候按照您的办法打包, 没有任何问题. 后面我自己打包了一个 react 组件包, 想发布在 npm 上安装到其他项目直接引入使用, 然而 react 报错说引入的东西太大了, 后面发现打包出来只有一个 js 文件, 它包含了我所有的依赖包和项目文件(总共有6MB, 即使压缩了也是2.6MB). 之后我尝试配置 webpack.config.dll.js 将 react, react-dom, antd 这种大的依赖包打包, 在其他 webpack 配置中通过 webpack.DllReferencePlugin 引入, 最后打包成功, 然而发布在...

>在专栏课程里,有位同学提到过一个很有意思的问题:“我没装 babel,js 入口里写了个箭头函数,运行 webpack 构建命令后,也成功编译了。这是为什么?”。今天就带领大家一起去探讨下这个话题。 在使用 webpack 的时候,很常见的一个构建优化手段就是**缩小构建目标**。比如在构建阶段只构建 src 里面的模块代码,对于 node_modules 里面所引入的三方包不进行构建操作。 # 发现问题 如果使用的是 webpack 3.x 版本,编写的构建脚本类似这样的,我们通过设置loader 里面的 exclude 字段避免由于解析 node_modules 里面的模块造成的构建耗时: ``` const path = require('path'); const webpack...

webpack

> 导语:近几年,随着 Electron/ NW.js 等技术的兴起,也催生了一批优秀的桌面端开发者工具,比如 VSCode、微信开发者工具、飞冰(ICE) 等等。对于开发者而言,桌面端开发者工具的优势是:可视化能力、操作系统层面的 API 访问、和良好的开发调试体验。因此,最近准备系统性的深入学习下 Electron 技术并且将学习的知识进行适当沉淀。本篇文章主要总结 Electron 的自定义菜单。 传统的 Web APP 的开发基本上不会涉及到菜单,但是在 Electron 里面它提供了对于菜单全面的控制,你可以通过 Menu、MenuItem 模块来创建应用所需的自定义菜单。这篇文章我们一起探讨下 Electron 中有哪些菜单种类,又是如何通过代码去自定义菜单的? 首先,我们一起看看基本的菜单介绍,方便大家对于基本的概念有初步的认识。 # 菜单介绍 Electron 里的菜单大体上分为三类:应用菜单、上下文菜单和 Dock 菜单(仅针对...

electron