Webpack - web秀

综合小程序服务器面试工具类ThreeJs比特币JavaScriptCssVue 展开

zxg_神说要有光

6月前

TSLint 和 ESLint 是怎么融合在一起的

TSLint 和 ESLint 是怎么融合在一起的

Eslint可以静态检查javascript代码一些逻辑上的错误，还有一些代码格式的错误。原理是把代码parse成AST，然后基于AST来检查一些问题。Tslint可以静态检查typescript代码的一些逻辑上的错误，一些代码格式的错误。原理也是基于AST的。既然都是基于AST，而且做的事情差不多，那为啥不合并到一起呢？后来，还真合并了，tslint合并到了eslint中，把tslint标记为了废弃。但是两者毕竟是不同的AST，而且tslint里还有一些类型检查相关的逻辑，这是eslint不支持的。那它

53 0 0

1年前

说说webpack中常见的Plugin？解决了什么问题？

说说webpack中常见的Plugin？解决了什么问题？

说说webpack中常见的Plugin？解决了什么问题？一、是什么Plugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据webpack中的plugin也是如此，plugin赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会运行在webpack的不同阶段（钩子/生命周期），贯穿了webpack整个编译周期目的在于解决loader无法实

310 0 0

5月前

初学者也能看懂的 Vue2 源码中那些实用的基础工具函数

初学者也能看懂的 Vue2 源码中那些实用的基础工具函数

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。1.前言大家好，我是若川。欢迎关注我的公众号若川视野，最近组织了源码共读活动，感兴趣的可以加我微信ruochuan12参与，已进行两个多月，大家一起交流学习，共同进步，很多人都表示收获颇丰。想学源码，极力推荐之前我写的《学习源码整体架构系列》包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue3.2发布、vue-this、c

62 0 0

zxg_神说要有光

7月前

前端工作的五层，你工作在哪一层？

前端工作的五层，你工作在哪一层？

现在前端的工作远不只切图那么简单，工作内容丰富了许多：有的前端工程师会做前端框架、做SDK，有的会做搭建平台，有的会做工程化工具链，有的会做业务开发，还有的会参与引擎层，定制js引擎和实现渲染引擎等。这么多种类型的前端工作内容，它们是什么关系呢？前端工作一共有哪些类型呢？这篇文章就来探究下这个问题：前端的工作内容都有哪些，之间的关系是什么。前端工作的五层前端的工作大概可以分为五层，从下到上分别是引擎层、runtime层、工具层、业务层、搭建层。我们分别来看一下：引擎层现在前端代码的运行容器不只是浏览器了，

57 0 0

1年前

说说webpack的热更新是如何做到的？原理是什么？

说说webpack的热更新是如何做到的？原理是什么？

说说webpack的热更新是如何做到的？原理是什么？一、是什么HMR全称HotModuleReplacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失如果使用的是HMR，就可以实现只将修改的模块实时替换至应用中，不必完全刷新整个应用在webpack中配置开启热模块也非常的简单，如下代码：constwebpack=require('webpack')

332 0 0

zxg_神说要有光

6月前

从前端编译到手写 Babel

从前端编译到手写 Babel

编译这个概念好像离前端很遥远，遥远到好像工作面试都不要求相关的知识。但是，真的遥远么？我们每天用Babel、TypescriptCompiler来做代码的转换，用VueTemplateCompiler来做Vue模版的解析，还会用Eslint做代码的静态检查、用Terser做代码压缩，最重要的是我们的JS代码是跑在JS引擎上的。这些不都是编译技术么？现在，你还觉得编译离前端很遥远么？其实，并不是编译技术在前端用不到，而恰恰是因为太过常用而容易被忽略。我们会去学习一些工具的使用，但不会去学习更底层的一些原理。

60 0 0

zxg_神说要有光

6月前

为啥套娃？聊聊 babel、jscodeshift 和阿里妈妈的 gogocode

为啥套娃？聊聊 babel、jscodeshift 和阿里妈妈的 gogocode

首先，我是《babel插件通关秘籍》掘金小册的作者，对babel有源码级的掌握，算是有资格讨论这个话题。本来会探讨以下话题：babel是怎么转换代码的jscodeshift是怎么转换代码的babel和jscodeshift的区别为什么不推荐gogocodebabel是怎么转换代码的babel编译流程分为3步：parse、transform、generateparse：把源码转成AST，babelparser（babylon）支持esnext语法，可通过插件支持typescript、jsx、flow等语法t

106 0 0

1年前

说说webpack的构建流程?

说说webpack的构建流程?

一、运行流程webpack的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好从启动到结束会依次执行以下三大步骤：初始化流程：从配置文件和Shell语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数编译构建流程：从Entry发出，针对每个Module串行调用对应的Loader去翻译文件内容，再找到该Module依赖的Module，递

395 0 0

zxg_神说要有光

6月前

写一个 eslint 插件：vue template 中 class 顺序的检查和自动修复

写一个 eslint 插件：vue template 中 class 顺序的检查和自动修复

有小伙伴问我如何修复vuetemplate中的class名的顺序、属性名顺序，还有options中的属性顺序的问题，用eslint可以做到么。答案是能，但是需要写eslint插件来检查和修复。考虑到他可能没有写过eslint插件，所以我先把相对简单的校验和修复class名的顺序的插件摘出来实现了一下。思路分析首先，eslint是否能parsevue的模版呢？是可以的，因为eslint的parser支持切换，而vue实现了对应的parser，所以可以在eslint中使用vue-eslint-parser来解

58 0 0

zxg_神说要有光

7月前

CSS TreeShaking 原理揭秘：手写一个 PurgeCss

CSS TreeShaking 原理揭秘：手写一个 PurgeCss

TreeShking是通过静态分析的方式找出源码中不会被使用的代码进行删除，达到减小编译打包产物的代码体积的目的。JS我们会用Webpack、Terser进行TreeShking，而CSS会用PurgeCss。PurgeCss会分析html或其他代码中css选择器的使用情况，进而删除没有被使用的css。是否对PurgeCss怎么找到无用的css的原理比较好奇呢？今天我们就来手写个简易版PurgeCss来探究下吧。思路分析PurgeCss要指定css应用到哪些html，它会分析html中的css选择器，根据

70 0 0

下拉加载更多

最新文章