道招
以webpack为例来看微内核架构
微内核系统一般分为两个部分—— 核心系统 和 插件系统 ,这样就提供了很好的灵活性和可扩展性。 核心系统是最小可运行的模块,它提供的是通用逻辑(比如Tapable),而插件系统这是些具体的逻辑(比如HtmlWebpackPlugin插件)。 比如系统怎么跑起来,插件之间怎么通信等模块都属于核心系统里面,让系统更加丰富多彩就是插件系统了。 插件之间可以相互独立,也可以有依赖,比如webpack的M
webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks
最近在这段时间刚好在温故下webpack源码,webpack5都出来了,4还不再学习下? 这次顺便学习下webpack的常用插件html-webpack-plugin。 发现这个插件里面还额外加入了自己的hooks,方便其它插件来实现自己的功能,不得不说作者真是个好人。 部分代码如下 // node_modules/html-webpack-plugin/index.js app(co
从vuecli3学习webpack记录(四)vue是怎么进行默认配置的
在我们讲到 从vuecli3学习webpack记录(一)vue-cli-serve机制 vue cli3中在commands文件夹里面的是调用api.registerCommand方法,在config文件夹里面的(teserOptions.js和html除外)是调用api.chainWebpack方法,该方法会将传得的参数(该参数是一个方法)push到this.service.webp
webpack笔记——hook执行时call的是什么
我们一般使用的插件都是Hook子类,比如SyncHook,没有复杂的重写基类Hook的compile方法 先看Hook基类 // node_module/tapable/Hook.js class Hook { constructor(args) { if (!Array.isArray(args)) args = []; this._args =
从vuecli3学习webpack记录(零)整体流程
今天看了下自己之前写的从vuecli3学习webpack记录系列,感觉自己居然没有在一开始的时候把vuecli的 npm run serve 的整体流程在一篇文章里面完整的讲完,可能是因为打字打的手疼,不想写了吧。今天特来补充一下。 这里是整体脉络,所以不会讲细节,细节在本系列里面已经讲到了。 const Service = require('../lib/Service') cons
从vuecli3学习webpack记录(二)webpack分析
上一篇里面讲到运行 npm run serve 时运行的是 serveice.run(comand, args, rawArgv) 并且提到它提示返回的是一个promise,所以后面还接着 .catch(err => {...}) ; run 方法里面是 return fn(args, rawArgv); 而 fn 就是 registerCommand (name, opts
从vuecli3学习webpack记录(一)vue-cli-serve机制
最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是因为cli3为我们安装了 vue-cli-service (执行的是 npm install --save-dev vue-cli-service ),这样可以在node_modules/.bin文件
从vuecli3学习webpack记录(三)基类Tapable和Hook分析
在查看webpack(及插件)源码的过程中,我们会经常看到类似这样的代码 compiler.hooks.done.tap('vue-cli-service serve',() => {}); // 或者 compilation.hooks.buildModule.tap("ProgressPlugin", moduleAdd); 或者
用webpack的require.context优化vue store和router文件
早期右边博文专门讲了下require.context的用法和简单用法介绍《用webpack的require.context() 简化你的代码》 这次说点自己在vue项目中的具体应用吧 store 首先看我的store的目录结构: 这里的每个文件夹都是一个module,所以在store/index.js里面可以这样写 import Vue from 'vue&#03
webpack反向代理proxyTable设置
目前各大打包工具在本地开发时都是使用的http-proxy-middleware插件 具体以vue为例,反向代理配置的就是proxyTable proxyTable: { 'http://www.baidu.com/ttt': { target: 'http://localhost:1333', changeOrigin: true, pathRewrite: {
关注道招网公众帐号
道招开发者二群