Vue Cli3 添加Loader和plugin

添加loader

在vue.config.js中的chainWebpack中添加配置：

chainWebpack: config => {
   
  // my-loader为loader的别名，./src/myLoader.js是loader的位置
  config.resolveLoader.alias.set('my-loader', path.resolve(__dirname, './src/myLoader.js'))
  // 修改vue文件Loader的选项，增加新的处理loader
  const vueRule = config.module.rule('vue')
  vueRule.use('my-loader').loader('my-loader').end()
},

现在有个需求需要拦截所有vue页面中村的外链，在跳转到其他网站前先跳转到一个需要用户确认跳转的中间页，就像知乎做的那样

myLoader.js内容如下：

module.exports = function (source) {
   
  const replace = source.replace(/(?<=['"])(http.*.*)(?=['"])/g, '#/link?goto=$1')
  return replace
}

link就是和上述知乎类似的跳转前的中间页

添加plugin

一样也是在vue.config.js中的chainWebpack中添加配置：

chainWebpack: config => {
   
  // ./src/versionPlugin.js是plugin的位置
  const VersionPlugin = require('./src/versionPlugin')
  config.plugin('version').use(VersionPlugin).tap(args => {
   
  	// 此处添加的参数可在versionPlugin的构造函数中获取
    return args
  })
}

现在有个需求需要在每次发布前根据当前时间设置项目的版本号的功能，versionPlugin内容如下：

'use strict'
const fs = require('fs')
const path = require('path')
const sep = path.sep
function VersionPlugin (options) {
   
  this.options = options || {
   }
}
VersionPlugin.prototype.apply = function (compiler) {
   
  var self = this
  // compiler的afterPlugins钩子
  compiler.plugin('afterPlugins', function (params) {
   
    const packageJsonPath = path.join(params.context, sep + 'package.json')
    const dateStr = getDateStr()
    let packageJsonStr = fs.readFileSync(packageJsonPath, 'utf8')
    const r = new RegExp('(?<=version\\":\\s*\\")(.*)(?=")')
    packageJsonStr = packageJsonStr.replace(r, "1.0." + dateStr)
    fs.writeFileSync(packageJsonPath, packageJsonStr, 'utf8')
  })
}
function getDateStr () {
   
  const now = new Date()
  return now.getFullYear() + format(now.getMonth() + 1) + format(now.getDate()) + format(now.getHours()) + format(now.getMinutes())
  function format (num) {
   
    return num < 10 ? '0' + num : '' + num
  }
}
module.exports = VersionPlugin

修改后的package.json内容：

{
   
  "name": "heart-patient",
  "version": "1.0.202011011243",
  "private": true,
  // ...
}

添加plugin的第二种方式

在vue.config.js的chainWebpack配置和上面一样，在VersionPlugin原型链上的apply函数修改如下：

VersionPlugin.prototype.apply = function (compiler) {
   
  compiler.hooks.afterPlugins.tap('version plugin', compiler => {
   
    const packageJsonPath = path.join(params.context, sep + 'package.json')
    const dateStr = getDateStr()
    let packageJsonStr = fs.readFileSync(packageJsonPath, 'utf8')
    const r = new RegExp('(?<=version\\":\\s*\\")(.*)(?=")')
    packageJsonStr = packageJsonStr.replace(r, "1.0." + dateStr)
    fs.writeFileSync(packageJsonPath, packageJsonStr, 'utf8')
  })
}