怎么调试Webpack+React项目，报错basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")怎么办 今天在WebStorm上Windows上准备调试一个React项目，就出现了这样的报错。
Node Parameters里面写的是webpack-dev-server的执行文件 .\node_modules\.bin\webpack-dev-server.cmd ，用的是相对当前工作空间Working directory的相对路径。
basedir=$(dirname "$(ec以webpack为例来看微内核架构 微内核系统一般分为两个部分—— 核心系统 和 插件系统 ，这样就提供了很好的灵活性和可扩展性。
核心系统是最小可运行的模块，它提供的是通用逻辑（比如Tapable），而插件系统这是些具体的逻辑（比如HtmlWebpackPlugin插件）。
比如系统怎么跑起来，插件之间怎么通信等模块都属于核心系统里面，让系统更加丰富多彩就是插件系统了。
插件之间可以相互独立，也可以有依赖，比如webpack的Mwebpack笔记——在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.webpwebpack笔记——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 关注道招网公众帐号
道招开发者二群
