@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('注入成功了！')
        `
      })
    ]
  }
});