- 博客(21)
- 收藏
- 关注
RSS订阅
转载 上传代码到Github仓库基操（一）
上传代码到Github仓库基操（一）由于笔者在上传文件到github仓库，由于相关操作经常会间歇性遗忘（还是不够熟悉惹的祸啊≧ ﹏ ≦），或者部分解决方案里并没有明确说明指令所表示的含义，所以在百度了许多许多的相关文章和blog后，将常用的指令和该指令所代表的意义归纳到这里，方便以后自己查阅，也是对学习进度的一个总结和督促o((>ω< ))o第一步：新建仓库并初始化（已存...
2018-08-11 17:09:39
168
原创 webpack 4 笔记八 高速缓存
上一节中尝试了对输出的代码进行一个拆分，现在尝试一种叫做缓存的技术吧官方文档使用webpack捆绑我们的模块化应用程序，从而生成可部署的/dist目录。一旦将内容/dist部署到服务器，客户端（通常是浏览器）将访问该服务器以获取该站点及其资产。最后一步可能很耗时，这就是为什么浏览器使用一种称为缓存的技术。这使得站点可以更快地加载，减少不必要的网络流量，但是当您需要拾取新代码时，它也会导致令人...
2019-04-05 23:17:31
130
原创 webpack 4 笔记七 代码拆分
代码拆分官方文档.代码拆分是webpack最引人注目的功能之一。此功能允许您将代码拆分为各种捆绑包，然后可以按需或并行加载。它可用于实现更小的捆绑并控制资源负载优先级，如果使用得当，可能会对加载时间产生重大影响。可用的代码拆分有三种通用的方法：Entry Points：使用entry配置手动拆分代码。Prevent Duplication：使用SplitChunksPlugin重复...
2019-04-04 21:24:00
297
原创 webpack 4 笔记六 关于tree shaking
tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)如果将应用程序比作一棵树。绿色表示实际用到的源码和 library，是树上活的树叶。灰色则表示无用的代码(dead-code)，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。tree shaking 的原理可以参考Tree-Shaking性...
2019-04-03 16:51:26
261
原创 webpack 4 笔记五 模块热替换
随着深入学习，新的知识点不断出现，一些知识点可能涉及到很深的知识架构，这里只是简单的接触，并不深入，在以后深入使用时再做详细介绍。模块热替换模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。这里是他的一个详细概念。前面说了， 使用 webpack-dev-server 可以实现浏...
2019-04-02 10:28:47
534
原创 webpack 4 笔记四 source map 与开发工具 webpack-dev-server
根据前文，完成了对输出文件的管理。现在，根据说明文档，建立一个开发环境，使开发变得更容易一些。主要是两个方面，一是使用 source map 来追踪错误和警告信息的位置，二是使用 webpack-dev-server 自动编译代码。使用 source map 追踪错误和警告信息当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js...
2019-04-01 15:40:08
850
原创 webpack 4 笔记三 输出管理
回退处理在上一笔记中，基本根据官方文档完成了 webpack 的局部安装与加载 css、图片、字体、数据，接下来因为无需使用到上一节中使用到的资源，所以需要清除之前的文件srccomci.wofflove.jpgstyle.cssdata.xmlwebpack.config.js...- module: { //配置所有第三方 loader 模块- rules...
2019-03-29 12:58:51
219
原创 webpack 4 笔记二 管理资源之加载css、图片、字体、数据
根据 官方中文文档 继续学习。根据前文，已完成了 webpack 的初步构建，本章是将css、图片、字体、数据等资源结合到 wenpack 的一种尝试，会遇到什么 bug 呢？让我们拭目以待吧
2019-03-27 12:05:03
220
原创 webpack 4 笔记一 简介及安装
2019年3月25日更新，目前 webpack 版本为4.29.6本地安装不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。安装1.在...
2019-03-26 10:47:29
164
原创 Gulp的使用(二)——插件与第一个项目与坑坑坑坑
插件作用：gulp-uglify——压缩js文件，减小文件大小。安装：项目文件目录下执行：cnpm install --save-dev gulp-uglify 或 npm install --save-dev gulp-uglify//使用cnpm原因及方法详见关于前端自动化工具Gulp的使用(一)——初次接触与安装....
2019-02-19 23:33:53
148
原创 关于在Windows上安装nodejs版本管理器nvm的两三事
一、背景之前学习vue框架，为方便学习，接触并使用Nodejs版本管理工具–nvm，由于已经安装了node和npm，导致按照网上一些教程步骤安装nvm时出现了一些错误，浪费了不少时间，现就自己在window系统上安装nvm的过程做一个简单的梳理，当作回顾总结。二、关于NVMNVM（Node Version Manager）是 Nodejs 版本管理器，它让我们能方便的对 Nodejs 的版本...
2019-01-16 13:28:41
408
原创 关于前端自动化工具Gulp的使用(一)——初次接触与安装
背景前段时间在网上看了一些优秀的前端面试者简历，eg：http://www.flqin.com/http://zhangwenli.com/cv/在我这初初初级阶段看起来是十分高大上的，再看看自己的白纸一张的惨不忍睹的简历，于是萌发了向前辈们学习的心情，首先当然Star和Fork一下啦。然后开干
2019-01-08 18:48:13
144
原创 关于Audio标签添加网易云音乐作为背景音乐的两三事
关于Audio标签添加网易云音乐作为背景音乐的两三事一、写在开头1.audio：html5音频标签<!-- 添加背景音乐 --><audio id="music" src="https://music.163.com/#/song?id=3405868" autoplay preload="auto" loop="loop">该浏览器不支持audio属性&l
2019-01-07 16:36:51
3018
1
转载 圣杯布局和双飞翼布局
第一步：给出HTML结构：Header内容区中间弹性区左边栏右边栏Footer内容区写结构的时候要注意，父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染嘛~并且设置其自适应，也就是width:100%。第二步：给出每个盒子的样式 header{width: 100%;height: 40px;background-color: darkseagreen;} ....
2018-08-20 21:23:09
125
转载 【转】关于前端的切图（三技巧中最实用）
分享一个photoshop cc 开始有的自动生成图标的方法，真的超级好用！！！（转）PhotoShop从CS版本演变到现在的CC版本，切图功能发生了比较大的变化，我们可以把PhotoShop CS版本时的切图功能称为传统切图，而从PhotoShop CC版本开始PS提出了精准切图。所谓传统切图就是切图人员基本上都是自己分割图层切图，传统切图又分为全手工切图和参考线切图；现在CC版本提出的精准...
2018-08-18 15:24:56
6336
原创 CSS学习笔记（布局）
前提：没有布局如果把所有内容都塞进一栏里，那么不设置任何布局也是OK的。 然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常难受：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。重点：display属性display 是CSS中最重要的用于控制布局的属性。 每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block ...
2018-08-17 09:19:05
126
原创 CSS学习笔记六（定位）
文档流静态定位——默认行为 相对定位—— 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置 绝对定位 固定定位z-index弹性盒子在父内容里面垂直居中一个块内容。使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽...
2018-08-15 22:09:51
210
原创 CSS学习笔记四
CSS学习：背景边框列表连接和更复杂的选择器背景： - background - background-color - background-image - background-repeat - background-position边框： - border - border-color - border-style - border-width ...
2018-08-14 15:02:50
136
转载 Github个人主页绑定域名实操
由于笔者在上传文件到github仓库，由于相关操作经常会间歇性遗忘（还是不够熟悉惹的祸啊≧ ﹏ ≦），或者部分解决方案里并没有明确说明指令所表示的含义，所以在百度了许多许多的相关文章和blog后，将常用的指令和该指令所代表的意义归纳到这里，方便以后自己查阅，也是对学习进度的一个总结和督促o((>ω< ))o有了自己的Github个人主页之后，接下来就是将主页和域名绑定( •̀ ω ...
2018-08-12 11:40:02
700
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人