道招

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

今天看了下自己之前写的从vuecli3学习webpack记录系列,感觉自己居然没有在一开始的时候把vuecli的npm run serve的整体流程在一篇文章里面完整的讲完,可能是因为打字打的手疼,不想写了吧。今天特来补充一下。

这里是整体脉络,所以不会讲细节,细节在本系列里面已经讲到了。

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

上一篇里面讲到运行npm run serve时运行的是serveice.run(comand, args, rawArgv)并且提到它提示返回的是一个promise,所以后面还接着.catch(err => {...}); run方法里面是

从vuecli3学习webpack记录(一)vue-cli-serve机制

最近看了看vuecli3,把自己的学习记录下来。

首先看入口npm run dev即是vue-cli-service serve,之所以能运行vue-cli-service命令,就是因为cli3为我们安装了vue-cli-service(执行的是npm insta

从vuecli3学习webpack记录(三)基类Tapable和Hook分析

在查看webpack(及插件)源码的过程中,我们会经常看到类似这样的代码

compiler.hooks.done.tap('vue-cli-service serve',() => {});
// 或者
compilation.hooks.buildModule.tap("
用webpack的require.context优化vue store和router文件

早期右边博文专门讲了下require.context的用法和简单用法介绍《用webpack的require.context() 简化你的代码》 这次说点自己在vue项目中的具体应用吧

store 首先看我的store的目录结构:

webpack反向代理proxyTable设置
目前各大打包工具在本地开发时都是使用的http-proxy-middleware插件 具体以vue为例,反向代理配置的就是proxyTable
proxyTable: {
  'http://www.baidu.com/ttt'
用webpack的require.context() 简化你的代码
随着我们的项目越来越大,平时的常见用操作就会觉得很‘麻烦’了,比如每次要添加新的路由, vuex里面添加新的module等
{
    name: 'moduleN',
    component ModuleN,