2020年01月_前端岚枫

11月 10月 09月 08月 07月 05月 04月 03月 02月 01月

原创 Webpack实战（九）：实现资源按需加载-资源异步加载

第八篇[《教你搞懂webpack如果实现代码分片（code splitting）》] (https://blog.csdn.net/lfcss/article/details/104099412) 主要分享了webpack实现代码分片的几种方式：合理地规划入口，使用Commons-ChunkPlugin或SplitChunks配置。这几种方法实现了资源按需加载。今天我分享另外一种实现方法–资源...

2020-01-29 16:05:44 2036 4

原创 Webpack实战（八）：教你搞懂webpack如果实现代码分片（code splitting）

2020年春节已过，本来打算回郑州，却因为新型冠状病毒感染肺炎的疫情公司推迟了上班的时间，我也推迟了去郑州的时间，在家多陪娃几天。以前都是在书房学习写博客，今天比较特殊，抱着电脑，在楼顶晒着太阳，陪着家人，写着博客。前面的几篇文章主要告诉大家如何安装、配置webpack、webpack实现样式分离等，今天这篇文章主要跟大家分享如果webpack如何实现代码分片。...

2020-01-28 21:32:37 1377 1

原创 Webpack实战（七）：简单搞懂PostCSS的用法及与一些插件的用法

不知不觉地春节要来临了，今天已经是放假的第二天，想想回老家之后所有的时间就不是自己的了，要陪孩子玩，走亲戚等等，我还是趁着在郑州的这两天，把几天后春节要发布的文章给提前整整。在此，提前祝大家春节快乐！！前面我已写了6篇相关的Webpack方面的技术知识点，今天我主要分享有关PostCSS方面的技术,PostCSS严格来说不是一款c s s预处理器，而是一个用 JavaScript 工具和插...

2020-01-21 14:52:03 5571 5

原创 2019年的一个小目标，成为csdn的博客专家，纪念一下

2020年1月17日上午申请了博客专家，下午收到申请已通过，我当时感觉到很兴奋，很激动，虽然19年的目标，20年初才达到，不过还没过春节，也算是19年的一个目标实现了，技术之路上的一个里程碑，在此纪念一下，以前也申请过，平台回复说我写的文章不够深，就像代码库，当时感觉很失落，不过幸好没放弃在博客上更新文章，记录自己工作遇到的难点、问题。今天终于实现了自己的这个小梦想了。在接下来的2020年中，...

2020-01-20 10:27:32 913 4

原创 Webpack实战（六）：如何优雅地运用样式CSS预处理

上一篇文章中，我主要分享了《Webpack如何分离样式文件》CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序,css预处理指的是在开发中我们经常会使用一些样式预编译语言，在项目打包过程中再将这些预编译语言转换成css。这些预编译语言具有便捷的特性，使用这些，可以减少代码编写，降低项目的开发和维护成本，提高开发效率。目前比较流行的几种主要是Sass、LESS、Stylu...

2020-01-19 11:30:42 3864 3

原创 Webpack实战（五）：轻松读懂Webpack如何分离样式文件

在上一篇文章中我给大家分享了预处理器（loader）,里面讲到了style-loader 和css-loader,有关样式引入的问题，但是上面的样式文件只是引入到style标签里面，并不是我想要的样式文件独立分离。如果想了解有关css-loader和style-loader可以参考以下地址：Webpack实战（四）：教教你如何轻松搞定-预处理器（loader）通过js引入样式文件只是把样...

2020-01-18 10:16:41 4330 7

原创 Webpack实战（四）：教教你如何轻松搞定-预处理器（loader）

前面三节，我主要给大家分享了有关webpack的一些配置的知识点，如何打包js文件，而如果我们遇到其他类型的资源如图片、css、字体font等等，我们该如何处理呢？今天会介绍预处理器（loader），它赋予了Webpack可处理不同资源类型的能力，极大丰富了其可扩展性。如果想了解Webpack的基础配置可以参考以下地址：Webpack实战（一）：Webpack打包工具安装及参数配置Web...

2020-01-16 13:25:09 4399 3

原创 Webpack实战（三）：作为前端你不得不懂的Webpack资源入口和出口的配置

关于Webpack前两篇跟大家分享的主要是Webpack的一些基本的配置，今天开始我们详细了解一下有关Webpack的各种配置，今天主要跟大家分享的是Webpack的资源入口和资源出口的配置。如果想了解前两篇的文章请访问下面的地址：Webpack实战（一）：Webpack打包工具安装及参数配置Webpack实战（二）：webpack-dev-server的介绍与用法资源入口配置资源入...

2020-01-10 14:51:55 4396 4

原创轻松弄懂var、let、const之间的区别

ECMAScript 6（简称ES6）是JavaScript语言的下一代标准，于2015年6月正式发布，也称ECMAScript 2015。ES6的好处ES6的出现为我们前端带来了很多方便之处，以前用js几十行才实现的一个功能，ES6几行代码就能简单的实现，ES6新增的一些特性，改变了很多弊端之处，比如新出现的let、const，实现了块级作用域功能，减少了以前var的全局变量，箭头函数代...

2020-01-08 14:16:01 5788 7

原创 Webpack实战（二）：基础配置入门 - webpack-dev-server的介绍与用法

为什么要用webpack-dev-server在开发中，我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后，我们需要执行npm run build命令更新js文件，然后再刷新页面，才能看到更新效果。webpack-dev-server正好解决了这个问题，是一款便捷的本地开发工具。webpack-dev-server 安装用以下命令进行安装：...

2020-01-05 17:54:33 8651 2

原创再见2019，拥抱2020

2019年已匆匆离去，2020年已来临，现在坐在书桌前，望着窗外下着雪，郑州2020年的第一场雪，来得有点晚，很多人都已期盼了很久的雪，今天终于跟大家见面了，心里有点迷茫，这一年经历了什么了，又收获了什么了，想想2019自己定的规划和目标，差了很远，只完成了其中的一小部分。2019年收获本科的课程还在坚持上，统考两科考试已过，不用担心影响毕业了，期末考试成绩还都可以，没自己想的那么差；读了...

2020-01-05 11:47:07 894 2

原创 Webpack实战（一）：基础入门-教你轻松搞定Webpack打包工具安装及参数配置

Webpack实战（一）：Webpack打包工具特点及安装为什么要模块化javascript跟其他开发语言有很多的区别，其中一个就是没有模块化概念，如果一个项目中有多个js文件，我们只能通过script标签引入的方式，把一个个js文件插入到页面，这种做法会也引起了很多弊端：需要手动维护JavaScript的加载顺序多次请求资源，影响了加载速度在每个script标签中，顶层作用域即全局作...

2020-01-03 09:42:02 2740 4