- 博客(29)
- 收藏
- 关注
RSS订阅原创 webpack中loader使用和的工作原理
loader的本质就是一个个的函数，在模块的编译阶段，会使用这些loader对源代码进行处理，处理时，一般都会生成AST解析树，这样可以方便处理。单个loader的使用没有什么好记录的。多个loader的使用是用一个use数组，loader的使用顺序是从下往上，也就是从use数组的后往前执行的，下面的load1、loader2、loader3是我自己定义的loader use: [ 'loader1', 'loader2', { loader: 'loader3'
2020-12-25 18:40:15
1188
1
原创 webpack的执行流程
1.初始化compiler：new Compiler(cnofig)， config就是webpack.config.js文件的内容2.开始编译：调用compiler的run方法开始编译3.确定入口：根据config的entry找到所有的入口文件4.编译模块：从入口文件触发，调用所有配置的loader对模块进行编译，并且还要收集模块依赖的模块，不断递归进行编译5.完成模块编译：在经过第4步使用Loader编译完所有模块后，得到每个模块编译的内容和它们的依赖关系6.输出资源：根据入口和模块之间的依
2020-12-25 15:31:59
852
原创 webpack单独生成chunk的方法
这里记录一下我所知道的可以生成chunk的方法1.多入口 // 多入口：有一个入口，最终输出就有一个bundle entry: { main: './src/js/index.js', test: './src/js/test.js' },
2020-12-25 15:13:01
1421
原创 nodejs中的相对路径与当前工作目录
相对路径的概念大家都知道，我现在有这样一个目录结构：我在build.js下有如下代码如果我直接cd到script目录下，执行build.js文件是会报错的这是因为当前工作目录为D:\es6Test\script，通过process.cwd()可以打印出当前工作目录那么readFileSync读取的绝对路径为D:\es6Test\script\src\index.js，这个文件是不存在的。但是我们如果不cd到script目录下，从而执行下面的命令：可以看到代码并没有报错，并且当前node
2020-12-25 12:55:01
2847
原创 webpack最终生成bundle原理（主要是js模块化的原理）
这是生成的依赖树{ './src/index.js': { code: '"use strict";\n' + '\n' + 'var _add = _interopRequireDefault(require("./add.js"));\n' + '\n' + 'var _count = _interopRequireDefault(require("./count.js"));\n' + '\n' + 'functio
2020-12-25 10:46:45
505
原创 理解webpack中proxy的pathRewrite
废话少说，直接上代码proxy: { // 一旦devServer(5000)服务器接收到 /api/xxx 的请求，就会把请求转发到另一个服务器(3000) // 浏览器和服务器之间有跨域，但是服务器和服务器之间没有跨域 '/api': { target: 'http://localhost:3000', // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api） pathRewrite: { '^/api': ''
2020-12-22 18:11:27
10026
原创 剑指offer19题（正则表达式匹配） javascript语言描述
const isMatch = (s, p) => { const n = s.length; const m = p.length; const dp = []; for (let i = 0; i <= n; i++) { dp[i] = []; for (let j = 0; j <= m; j++) { dp[i][j] = -1; } } return solve(0, 0, s, p, dp) === 1;};c
2020-12-22 15:45:39
82
原创 webpack生产环境将css文件单独分离的好处
webpack打包的过程中，有一个环节叫提取js中的css成单独文件。在这之前，是使用style-loader，这样引入js的时候，就会把样式插入到style当中。那么为什么要把css文件单独提取出来呢？我个人做了以下分析：将css文件单独提取出来，那么就可以先在页面的最前面引入这个单独的css文件，浏览器先解析了css文件就会生成cssom从而与dom tree生成渲染树从而以最快速度渲染出页面。如果放在js文件中，不仅会增加js文件体积，使js文件的下载时间延长，而且进行解析js文件往往都是在d
2020-12-09 17:48:30
958
原创 webpack 5.0 HtmlWebpackPlugin插件报错，The ‘compilation‘ argument must be an instance of Compilation
就是webpack5太新了，以前的html-web-pack-plugin支持不了了解决方法：先把先有的html-webpack-plugin卸载了npm uninstall html-webpack-plugin然后安装最最最最新的npm i --save-dev html-webpack-plugin@next
2020-12-08 19:19:10
376
3
原创 es6模块化的注意点以及与commonjs模块化的区别
Commonjs的模块是运行时加载，而且加载的是整个模块// CommonJS模块let { stat, exists, readfile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3
2020-12-07 18:24:58
586
1
原创 javascript严格模式的限制
1.变量必须声明后再使用2.函数的参数不能有同名属性，否则报错3.不能使用with语句4.不能对只读属性赋值，否则报错5.不能使用前缀 0 表示八进制数，否则报错6.不能删除不可删除的属性，否则报错7.不能删除变量delete prop，会报错，只能删除属性delete global[prop]8.eval不会在它的外层作用域引入变量9.eval和arguments不能被重新赋值10.arguments不会自动反映函数参数的变化11.不能使用arguments.callee12.不能使
2020-12-07 16:52:02
928
原创 Javascript set get方法注意点
1.get方法return的值就是当前属性与其绑定的值，我们可以通过直接改变与其绑定的值来改变当前的属性值。let value = 'arthur';const o = { get prop() { return value; }};value = 'hsing';console.log(o.prop);结果2.set方法内部只能通过改变绑定的值来改变当前属性值，下面这样写是不行的let value = 'arthur';const o = { get prop()
2020-12-06 16:28:49
384
原创 nodejs promisify
const fs = require('fs');const promisify = (asyncFn) => { return (...args) => { return new Promise((res, rej) => { args.push((err, data) => { if (err) { rej(err); } else { res(data); }
2020-12-05 19:01:21
704
原创 Promise源码分析记录
1.Promise最基本resolve,reject, then的功能是怎么实现的？promise有三个状态，PENDING、FULFILLED和REJECTED，Promise的构造函数会接受一个executor回调函数参数，这个回调函数参数会立即被调用，并传入另外两个参数，即resolve和reject函数，它们分别接收一个value和一个reason参数，这两个函数是定义在Promise的构造函数里面的，resolve函数的功能就是将当前Promise的状态由PENDING改为FULFILLED，然
2020-12-05 18:00:32
157
原创 javascript动态规划之缓存与递归优化
动态规划的适用性1.最优子结构2.无后效性3.子问题的重叠性例题：一只青蛙一次可以跳上1级台阶，也可以跳上2级台阶。求该青蛙跳上一个 n 级的台阶总共有多少种跳法。这个问题的最直白的写法就是： const numWays = function (n) { if (n < 0) { return 0n; //BigInt表示法 } if (n === 0){ return 1n //BigInt表示法 } const
2020-12-05 12:47:50
217
转载 浏览器的线程有哪些
浏览器的渲染进程是多线程的。js是阻塞单线程的。浏览器包含有以下线程：1.GUI渲染线程负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。2.JS引擎线程也称为JS内核，负责处理Javascript脚本程
2020-12-02 21:06:02
2672
转载 浏览器加载、解析、渲染原理（转）
1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；2. 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；4. 浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；5. 浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
2020-12-02 20:50:23
193
原创 Promise细小知识点梳理
1.Promise用于解决异步流程化的问题2.Promise的构造函数主要用于包装不支持Promise的函数3.Promise.all方法的参数是一个可迭代对象(iterable)，也就是说传入一个String也可以4.Promise.all当且仅当传入的可迭代对象为空时为同步(Promise.all的3.4两个特点在Promise的其它静态方法中也类似)var p = Promise.all([]); // will be immediately resolvedvar p2 = Promis
2020-12-01 21:24:55
539
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人