6.19 refs绑定undefined，编写一个简单的loader，编写一个简单的plugin，loader和plugin区别

1、vue提供的ref用于绑定成为dom的引用，方便操作dom
今天遇到个问题，就是在近300秒的请求结束后，this.list赋值让<li ref=“privince” v-for>去遍历绑定
打印this.refs.province 发现为undefined ，打印 dom树 也是undefined

然后尝试加入异步函数setTimeout() // 没有设置延迟时间


结果打印正常，判断是进程栈setTimeout()函数 执行后于 dom树渲染完毕。
注：经反复测试，setTimeout(() =>, 20) 还是延迟20毫秒较合适。

2、如何编写一个简单的loader

1、编写最简单的loader

use loader（入口文件是index.js 内容是console.log(‘hello shouer’）

打包结束，loader生效

2、编写一个带配置项的loader
添加配置项

修改replaceLoader尝试打印this.query
显示 接收到options的参数，表明可以用this.query获取传递过来的参数


一个带有配置参数的loader就写完了。

3、有时this的指向会不正确。官方推荐loader-utils

4、loader中callback携带4个参数
据官方文档： 因为return 只能携带一个对象，所以sourceMap携带不出去，就提供一下配置

5、异步loader 及返回结果

6、先后指向2个loader且让代码优雅化

三、编写一个plugin

插件本身是一个类，所以先定义类。

在配置文件中引入

打包npm run build

参数传递



对指定周期使用plugin

查看打包内容有哪些

自定义生成版权文件(emit异步钩子中)



同步时刻钩子,(无回调)

怎么能知道钩子中有哪些属性呢？

在package.json中

注: node node_modules/webpack/bin/webpack.js 等于 webpack
–inspect 指开启node的调试工具
–inspect-brk 在运行webpack.js做调式的时候，第一行打一个断点

查看浏览器开发者工具

故，可以在compilation变量之前，打一处断点

点击进入下一个断点

成功进入debugger断点处


或者watch监听

四、loader和plugin区别

loader： 当我们在源代码里引入新的js文件，或者其他格式的文件，可以借助loader处理引用的文件。即处理模块。(loader是个函数)
plugin： 当我们在打包的某一个具体时刻，比如打包结束HtmlWebpackPlugin，在打包之前清空dist目录，CleanWebpackPlugin,在打包的时刻做一些事情，就是plugin做的事情。(插件是个类)
webpack源代码80%都需要用到plugin, plugin是webpack的灵魂。