Webpack - web秀

综合Uni-AppWebpackReactHtmlElectron-VueElectronVue-NuxtTypeScriptNodeJs 展开

3年前

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

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

说说webpack中常见的Loader？解决了什么问题？一、是什么loader用于对模块的"源代码"进行转换，在import或"加载"模块时预处理文件webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。如下图所示：在webpack内部中，任何文件都是模块，不仅仅只是js文件默认情况下，在遇到import或者load加载模块的时候，webpack只支持对js文件打包像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对

547576 3325 0

zxg_神说要有光

2年前

深入对比 eslint 插件和 babel 插件的异同点

深入对比 eslint 插件和 babel 插件的异同点

babel和eslint都是基于AST的，一个是做代码的转换，一个是做错误检查和修复。babel插件和eslint插件都能够分析和转换代码，那这俩到底有啥不同呢？本文我们来探究下babel插件和eslint插件差别在哪里。babel插件babel的编译流程分为parse、transform、generate3步，可以指定插件，在遍历AST的时候会合并调用visitor。比如我们写一个在console.xx的参数插入文件名+行列号的插件：对函数调用节点（CallExpression）的callee属性进行检

545572 3291 0

2年前

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

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

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

546688 3291 0

zxg_神说要有光

2年前

《从 0 到 1 手写 babel》思路分享

《从 0 到 1 手写 babel》思路分享

前言周末我在开心地写着小册的时候，不小心碰倒了饮料，撒了一些在键盘上，虽然我很快的收拾了一下，但电脑却突然关机了。我尝试着重启了一下发现启动不了了，最终确认它坏掉了。电脑坏掉倒不是我最担心的，主要是我答应了很多读者要下周上线小册，不能再鸽了，可是现在不得不鸽了，因为代码全在那台电脑。我在想着怎么弥补比较好，想起不少人期待最后的《手写简易的babel》那个案例的，正好我最近也在写那个案例了，我想着要不提前分享下思路吧。算是一些补偿（也公布下再鸽几天的消息）。整体思路babel的编译流程我们知道，babel的

545972 3317 0

3年前

说说webpack的构建流程?

说说webpack的构建流程?

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

546132 3306 0

zxg_神说要有光

2年前

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

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

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

545553 3279 0

zxg_神说要有光

2年前

用 VSCode 调试网页的 JS 代码有多香

用 VSCode 调试网页的 JS 代码有多香

相比纯看代码来说，我更推荐结合debugger来看，它可以让我们看到代码实际的执行路线，每一个变量的变化。可以大段大段代码跳着看，也可以对某段逻辑一步步的执行来看。Javascript代码主要有两个运行环境，一个是Node.js，一个是浏览器。一般来说，调试Node.js上跑的JS代码我会用VSCode的debugger，调试浏览器上的JS代码我会用chromedevtools。直到有一天我发现VSCode也能调试浏览器上的的JS代码，试了一下，是真的香。具体有多香呢？我们一起来看一下。在项目的根目录下有

543345 3307 0

5年前

Webpack require.context() 前端工程化之动态导入文件

Webpack require.context() 前端工程化之动态导入文件

前言随着项目越来越大，业务需要越来越多，我们项目的目录层级也是非常的多。如果还是通过import分别引入文件，那是非常的不科学的。比如vue项目vuex文件非常多：importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);importuserfrom'./stores/user';importinfofrom'./stores/info';...//此处省略N多文件exportdefaultnewVuex.Store({modules:{user,info

555219 3823 0

2年前

从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器

从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器

1.前言大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信ruochuan12参与，或者关注我的公众号若川视野，回复“源码”参与。已进行三个月，大家一起交流学习，共同进步，很多人都表示收获颇丰。想学源码，极力推荐之前我写的《学习源码整体架构系列》包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue3.2发布、vue-this、create-vue、玩具vite等10余篇

545071 3281 0

zxg_神说要有光

2年前

快速入门 postcss 插件：自动转换 px 到 rem

快速入门 postcss 插件：自动转换 px 到 rem

postcss是css的transpiler（转换编译器，简称转译器），它对于css就像babel对于js一样，能够做css代码的分析和转换。同时，它也提供了插件机制来做自定义的转换。这一节，我们通过一个px自动转rem的功能来入门一下postcss的插件。postcss的原理postcss是css到css的转译器，它也和babel一样，分为parse、transform、generate3个阶段。各种转换插件都是工作在transform阶段，基于AST做分析和转换。css的AST比js的简单多了，主要有

545411 3305 0

下拉加载更多

猜你喜欢

换一换

最新文章