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的选项，增加新的处理loaderconst 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')})
}

Vue Cli3 添加Loader和plugin相关推荐

vue cli3 添加 px2rem-loader
1.先安装 flexible和 postcss-px2rem npm install lib-flexible --savenpm install postcss-px2rem --save 2.引 ...
Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】
今天,我们使用Vue CLI3 做一个移动端适配 . 前言首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在m ...
Vue cli3 库模式搭建组件库并发布到 npm
三.规划目录结构 1.创建项目在指定目录中使用命令创建一个默认的项目,或者根据自己需要自己选择. $ vue create . 2.调整目录我们需要一个目录存放组件,一个目录存放示例,按照以下方式 ...
Vue CLI3 基本使用配置；
Vue CLI3 开始安装: npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个项目: vue create my-project ...
Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
webpack的loader与plugin原理
文章目录 loader原理 loader执行顺序 loader使用方式 loader的实现参数同步loader 异步loader Raw loader Pitching loader loader ...
Webpack自定义Loader和Plugin方法
手写Loader Loader 本质上是导出函数的 JavaScript 模块,而该模块导出的函数被称为 Normal Loader,在开发 Loader时,我们可以在导出的函数上添加一个 pitch ...
公司项目vue cli2升级到vue cli3
背景: 公司项目历时时间较长,通过长时间的迭代,目前项目文件较多(src目录下有2217个文件),系统庞大, 之前通过vue cli2脚手架构建的项目框架,在本地开发时已经明显感觉到吃力(项目首次启动 ...
Vue Cli3安装配置步骤
一.准备工作: mac系统的前面加上sudo获取管理员权限安装node.js(自带了软件包管理工具npm) 安装webpack,命令: sudo npm install webpack -g //- ...

Vue Cli3 添加Loader和plugin

添加loader

添加plugin

添加plugin的第二种方式

Vue Cli3 添加Loader和plugin相关推荐

最新文章

热门文章