基于webpack的loader开发方法，请参考https://segmentfault.com/a/1190000012718374
初始化loader项目
使用npm init初始化test-loader项目开发loader
在test-loader文件夹中新增index.js文件，内容如下：
module.exports = function (source) {
// 此处添加loader定义内容。相关API参考https://segmentfault.com/a/1190000012718374
// source以字符串的形式传入loader
console.log('loader executed', source)
return source
}
- 将test-loader注册到全局node-modules，方便webpack使用
在test-loader文件夹中，执行
npm link
该命令将test-loader使用链接到全局node_modules。
- 安装@vue/cli，初始化项目
npm install -g @vue/cli
vue-create vue-demo
- 设置vue.config.js
在vue项目的根目录下增加vue.config.js文件，增加如下配置：
module.exports = {
chainWebpack: config => {
config.module
.rule('test')
.test(/\.vue/)
.use()
.loader('test-loader')
.end()
}
}
- 在项目中关联test-loader
在仙姑根目录下执行
npm link test-loader
- 运行打包
npm run build
可以看到console台中输出了vue文件内容
