道招
webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks
p 最近在这段时间刚好在温故下webpack源码,webpack5都出来了,4还不再学习下? 这次顺便学习下webpack的常用插件html-webpack-plugin。 发现这个插件里面还额外加入了自己的hooks,方便其它插件来实现自己的功能,不得不说作者真是个好人。 /p p 部分代码如下 /p pre code class= language-javascript // n
从vuecli3学习webpack记录(四)vue是怎么进行默认配置的
p 在我们讲到 a href= https://www.daozhao.com/8617.html 从vuecli3学习webpack记录(一)vue-cli-serve机制 /a /p blockquote p vue cli3中在commands文件夹里面的是调用api.registerCommand方法,在config文件夹里面的(teserOptions.js和html除外)
webpack笔记——hook执行时call的是什么
p 我们一般使用的插件都是Hook子类,比如SyncHook,没有复杂的重写基类Hook的compile方法 先看Hook基类 /p pre code class= language-javascript // node_module/tapable/Hook.js class Hook { constructor(args) { if (!Array.isArr
从vuecli3学习webpack记录(零)整体流程
p 今天看了下自己之前写的从vuecli3学习webpack记录系列,感觉自己居然没有在一开始的时候把vuecli的 code npm run serve /code 的整体流程在一篇文章里面完整的讲完,可能是因为打字打的手疼,不想写了吧。今天特来补充一下。 /p p 这里是整体脉络,所以不会讲细节,细节在本系列里面已经讲到了。 /p pre code class= language-
从vuecli3学习webpack记录(二)webpack分析
p 上一篇里面讲到运行 code npm run serve /code 时运行的是 code serveice.run(comand, args, rawArgv) /code 并且提到它提示返回的是一个promise,所以后面还接着 code .catch(err => {...}) /code ; code run /code 方法里面是 /p pre code class=
从vuecli3学习webpack记录(一)vue-cli-serve机制
p 最近看了看vuecli3,把自己的学习记录下来。 /p p 首先看入口 code npm run dev /code 即是 code vue-cli-service serve /code ,之所以能运行 code vue-cli-service /code 命令,就是因为cli3为我们安装了 code vue-cli-service /code (执行的是 code npm insta
从vuecli3学习webpack记录(三)基类Tapable和Hook分析
p 在查看webpack(及插件)源码的过程中,我们会经常看到类似这样的代码 /p pre code class= language-javascript compiler.hooks.done.tap('vue-cli-service serve',() => {}); // 或者 compilation.hooks.buildModule.tap(&quot
用webpack的require.context优化vue store和router文件
p 早期右边博文专门讲了下require.context的用法和简单用法介绍《用webpack的require.context() 简化你的代码》 这次说点自己在vue项目中的具体应用吧 /p p store 首先看我的store的目录结构: /p p img src= https://www.daozhao.com/wp-content/uploads/2019/04/f8ccf0b
webpack反向代理proxyTable设置
目前各大打包工具在本地开发时都是使用的http-proxy-middleware插件 具体以vue为例,反向代理配置的就是proxyTable pre class= line-numbers prism-highlight data-start= 1 code class= language-json proxyTable: { 'http://www.baidu.com/ttt'
用webpack的require.context() 简化你的代码
p 随着我们的项目越来越大,平时的常见用操作就会觉得很‘麻烦’了,比如每次要添加新的路由, vuex里面添加新的module等 /p pre code class= language-javascript { name: 'moduleN', component ModuleN, path: '/moduleN', } /c

webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks

从vuecli3学习webpack记录(四)vue是怎么进行默认配置的

webpack笔记——hook执行时call的是什么

从vuecli3学习webpack记录(二)webpack分析

从vuecli3学习webpack记录(零)整体流程

关注道招网公众帐号