我们在React（或Vue）项目本地开发过程中很容易由前端自己解决跨域问题，这里面就用到的是插件 http-proxy-middleware ，它并不是webpack独享的插件，而是一个通用插件，它对 http-proxy 进行了一层封装，更加方便我们使用。 之前刚接触webpack的时候写过一个 webpack反向代理proxyTable设置 前几天有个测试同事找我解决她的跑的本地项
今天在WebStorm上Windows上准备调试一个React项目，就出现了这样的报错。 Node Parameters里面写的是webpack-dev-server的执行文件 .\node_modules\.bin\webpack-dev-server.cmd ，用的是相对当前工作空间Working directory的相对路径。 basedir=$(dirname "$(ec
微内核系统一般分为两个部分—— 核心系统 和 插件系统 ，这样就提供了很好的灵活性和可扩展性。 核心系统是最小可运行的模块，它提供的是通用逻辑（比如Tapable），而插件系统这是些具体的逻辑（比如HtmlWebpackPlugin插件）。 比如系统怎么跑起来，插件之间怎么通信等模块都属于核心系统里面，让系统更加丰富多彩就是插件系统了。 插件之间可以相互独立，也可以有依赖，比如webpack的M
最近在这段时间刚好在温故下webpack源码，webpack5都出来了，4还不再学习下？ 这次顺便学习下webpack的常用插件html-webpack-plugin。 发现这个插件里面还额外加入了自己的hooks，方便其它插件来实现自己的功能，不得不说作者真是个好人。 部分代码如下 // node_modules/html-webpack-plugin/index.js app(co
在我们讲到 从vuecli3学习webpack记录（一）vue-cli-serve机制 vue cli3中在commands文件夹里面的是调用api.registerCommand方法，在config文件夹里面的（teserOptions.js和html除外）是调用api.chainWebpack方法，该方法会将传得的参数（该参数是一个方法）push到this.service.webp
我们一般使用的插件都是Hook子类，比如SyncHook，没有复杂的重写基类Hook的compile方法 先看Hook基类 // node_module/tapable/Hook.js class Hook { constructor(args) { if (!Array.isArray(args)) args = []; this._args =
今天看了下自己之前写的从vuecli3学习webpack记录系列，感觉自己居然没有在一开始的时候把vuecli的 npm run serve 的整体流程在一篇文章里面完整的讲完，可能是因为打字打的手疼，不想写了吧。今天特来补充一下。 这里是整体脉络，所以不会讲细节，细节在本系列里面已经讲到了。 const Service = require('../lib/Service') cons
上一篇里面讲到运行 npm run serve 时运行的是 serveice.run(comand, args, rawArgv) 并且提到它提示返回的是一个promise，所以后面还接着 .catch(err => {...}) ; run 方法里面是 return fn(args, rawArgv); 而 fn 就是 registerCommand (name, opts
最近看了看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文件
在查看webpack（及插件）源码的过程中，我们会经常看到类似这样的代码 compiler.hooks.done.tap('vue-cli-service serve',() => {}); // 或者 compilation.hooks.buildModule.tap("ProgressPlugin", moduleAdd); 或者
