Node.js介绍Node.js,一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。Node.js,使用非阻塞的,事件驱动的I/O操作来保持在处理跨平台 (across distributed devices) 数据密集型实时应用时的轻巧高效。简单地说,Node.js就是运 ......
137
0
0
2023-09-27
目录一、webpack-bundle-analyzer 是什么?二、安装三、使用方法1. 作为插件使用2. 作为CLI的一个工具参考文章:一、webpack-bundle-analyzer 是什么?webpack-bundle-analyzer 是 webpack 的插件,需要配合 webpack 和 webpack-cli 一起使用。这个插件可以读取输出文 ......
151
0
0
2023-08-03
目录为什么需要 mockmock 数据的方式json schema可视化的 mock在 webpack 实现 mock server 需要的知识实现 webpack mock server小试牛刀大刀阔斧后话为什么需要 mock至于平时开发为什么需要 mock 数据,应该大多数的同学都非常清楚了;如果前后端同步开发的话,少不了这一步,在需求评审,技术评估等流 ......
141
0
0
2023-08-03
目录npm 介绍packages和modules的区别package.json 详解nameversiondescriptionkeywordshomepagebugslicenserepositoryfilesmain和browsertypebinexportsconfigdependenciesdevDependenciesdependencies扩展p ......
178
0
0
2023-07-30
目录前言一、准备工作二、初始化阶段2.1、读取与合并配置信息2.2、创建编译器(compiler)对象2.3、插件注册三、编译阶段3.1、创建 compilation 编译对象3.2、读取 entry 入口文件3.3、编译 entry 入口文件四、生成阶段五、写入阶段六、编写 loader七、编写插件文末前言webpack 在前端工程领域起到了中流砥柱的作用 ......
173
0
0
2023-07-02
目录为什么需要Source Mapdevtool选项devtool为false和'eval'有啥区别准备工作1,创建项目 安装依赖2,添加文件3,写配置 webpack.config.js4,在package.json中添加5,执行 npm run build,打包文件生成到了dist文件夹中,至此,准备工作完毕。观察devtool为false时1, 在di ......
198
0
0
2023-06-17
目录起步1. 基本安装2. 配置出入口plugin1. html-webpack-plugin2. progress-bar-webpack-pluginloader1. css-loader与style-loader2. url-loader与file-loader3. sass-loader4. postcss-loader5. babel-loader ......
132
0
0
2023-06-13
目录前言原理分析源码分析及实现如何动态加载远程模块__webpack_require__.e 函数的实现如何执行远程模块?总结前言在开始之前,先给我的mini-react打个广告。对react源码感兴趣的朋友,走过路过的朋友点个star在平时的开发中,我们经常使用 import()实现代码分割和懒加载。在低版本的浏览器中并不支持动态 import(),那 w ......
165
0
0
2023-05-15
webpack ensure相信大家都听过。有人称它为异步加载,也有人说做代码切割,那这个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的,然后使用这个模块的时候,webpack会构造script dom元素,由浏览器发起异步请求这个js文件。这样解决整个项目打包成同一个非常大js、css,首屏加载慢。其实和我们加载百度统计代码类 ......
233
0
0
2023-05-02
webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。Webpack 可以认为是一种基于事件流的编程范例,内部的工作流程都是基于 插件 机制串接起来; 而将这些插件粘合起来的就 ......
166
0
0
2023-05-02
Tree-shaking 最早由打包工具 Rollup 提出DCE 作用于模块内(webpack 的 DCE 通过 UglifyJS 完成),而 Tree-shaking 则是在打包的时候通过模块之间的信息打包必须的代码。Webpack 从 2 开始也支持 Tree-shaking,对于一个模块,没有被使用过的引入代码并不会被打包 DCE ......
249
0
0
2023-05-02
热更新,主要就是把前端工程 文件变更,即时编译,然后通知到浏览器端,刷新代码。服务单与客户端通信方式有:ajax 轮询,EventSource、websockt。客户端刷新一般分为两种:整体页面刷新,不保留页面状态,就是简单粗暴,直接window.location.reload()。基于WDS (Webpack-dev-server)的模块热替换,只需要局部 ......
238
0
0
2023-05-02
目录一、前提条件二、手动搭建vue项目的步骤:1. 创建项目2. 生成package.json文件3. 引入webpack和创建webpack.config.js文件4. 创建index.html,main.js文件5. 使用webpack命令编译6. 引入vue2,修改index.html,main.js文件7. 引入babel8. 再次执行webpack ......
176
0
0
2023-04-07
一、webpack介绍1、由来由于前端之前js、css、图片文件需要单独进行压缩和打包,这样团队人员处理很繁琐,然后 Instagram 团队就想让这些工作自动化,然后webpack应运而生。2、介绍webpack是一个模块打包器(module bundler),webpack视HTML,JS,CSS,图片等文件都是一种 资源 ,每个资源文件都是一个模块(m ......
203
0
0
2023-03-23
1. 解析 ES61. 安装依赖npm i @babel/core @babel/preset-env babel-loader -D 2. 配置babelbabel的配置在.babelrc文件里面,要解析资源,需要进行相关配置。{ "presets": [ "@babel/preset-env" ] } ......
289
0
0
2023-03-14