基于@vue/cli3开发webpack Loader

基于webpack的loader开发方法，请参考https://segmentfault.com/a/1190000012718374

1. 初始化loader项目
   使用npm init初始化test-loader项目

2. 开发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
}

3. 将test-loader注册到全局node-modules，方便webpack使用
   在test-loader文件夹中，执行

npm link

该命令将test-loader使用链接到全局node_modules。

4. 安装@vue/cli，初始化项目

npm install -g @vue/cli

vue-create vue-demo

5. 设置vue.config.js
   在vue项目的根目录下增加vue.config.js文件，增加如下配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('test')
      .test(/\.vue/)
      .use()
      .loader('test-loader')
      .end()
  }
}

6. 在项目中关联test-loader
   在仙姑根目录下执行

npm link test-loader

7. 运行打包

npm run build

可以看到console台中输出了vue文件内容