@mwork-plugins/webpack

Loader

VueTemplateLog

为 vue 文件中的函数增加 log, 方便开发者查询对应文件位置。

options

名称	类型	描述	默认值
enable	{Boolean}	是否开loader	默认值: false
events	{Array}	哪些事件需要增加log	默认值: []

使用案例

// vue.config.js
module.exports = defineConfig({
  transpileDependencies: true,

  chainWebpack: config => {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('vue-template-log')
      .loader('work-webpack/dist/vueTemplateLog')
      .options({
        events: ['cancel', 'ok', 'click'], // 为@cancel @ok @click 事件增加 log
        enable: true
      })
      .end();
  }
});

Plugins

ModulesAnalysis

用于分析项目中 node_modules 使用的次数与方式。

分析出项目中每个包的使用情况，使开发者能够分析哪些包可以更进一步的做优化。

options

名称	类型	描述	默认值
enable	{Boolean}	是否开启插件	默认值:false
enable	{Boolean}	是否开启插件	默认值:false
acceptType	{Array}	文件类型	默认值: ['vue', 'js', 'jsx', 'tsx', 'ts']
ignoreModules	{Array}	需要被忽略的 node_module 名称	默认值: ['vue', 'vue-router']
extraModules	{Array}	额外的包，补充在package.json 中没有的包	默认值: []
outputType	{String}	输出方式, 支持 json markdown	默认值: json

使用案例

// vue.config.js
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new ModulesAnalysis({
        enable: true
      })
    ]
  }
});

SafeDeleteFile

用于分析项目中有哪些文件没有被使用，也许可以安全删除。

在老项目不停的迭代，有些代码或文件也许早已没有作用，但开发者不知道哪些文件可以安全删除。那么你可以试试这个插件！

options

名称	类型	描述	默认值
enable	{Boolean}	是否开启插件	默认值: false
folderPath	{String}	文件路径	默认值: cli 执行目录下的 src
ignore	{String} {Array}	需要被忽略文件夹或文件	默认值: []
outputType	{String}	输出方式, 支持 json markdown	默认值: json

使用案例

// vue.config.js
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new SafeDeleteFile({
        enable: true
      })
    ]
  }
});

InjectEntryCode

向主入口文件注入代码。

options

名称	类型	描述	默认值
enable	{Boolean}	是否开启插件	默认值: false
injectCode	{String}	任意能执行的 javaScript 代码	默认值: ''

使用案例

// vue.config.js
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new InjectEntryCode({
        enable: true,
        // 某个项目在开发阶段，因历史原因 遗留的 console 特别多的时候，影响开发调试。
        // 注入一段代码重写 console 为空函数（实现清理旧 console 的目的，使用 mconsole(重写前的 console api )打印日志。
        // 三方插件可以压缩代码丢弃 console，但是代码压缩会增加开发者机器压力。
        injectCode: `
            window.mconsole = { ...console }
            const type = ['log', 'info', 'error', 'warn']
            type.forEach((item) => {
                window.console[item] = (...args) => { }
            })
            mconsole.log('注入成功了！')
        `
      })
    ]
  }
});