Plugin Light

Plugin Light 是一个丰富、易用的工具集。包含一些 Webpack 相关插件，比如

• 依赖分析
• JS分发
• 组件分发
• npm包打包失败修复
• 生成版本号
• rem转rpx
• appId替换
• 拷贝本地文件
• ...

以及一些 Loader

• 自定义ifdef
• 插入全局组件
• 替换三方库
• v-lazy兼容
• 替换动态组件
• 替换vue标签
• 替换v-for中的key
• ...

还有一些 Webpack 基础配置和 CLI 命令。

安装

npm install -D plugin-light

插件使用示例

// vue.config.js

const { DispatchScriptPlugin } = require('plugin-light/lib/plugin');

let plugins = []

if (process.env.NODE_ENV === 'production') {
  // js分发
  plugins.push(new DispatchScriptPlugin());
}

module.exports = {
  configureWebpack: {
    plugins,
  }
}

loader 使用示例

// vue.config.js

const { LOADER_MAP } = 'plugin-light/lib/loader';

module.export = {
  chainWebpack(config) {
    config.module
      .rule('ifdef-loader')
      // 根据项目实际配置文件类型
      .test(/press-ui.*(\.vue|\.ts|\.js|\.css|\.scss)$/)
      // 不要配成下面这样，会卡住
      // .test(/\.vue|\.ts|\.js|\.css|\.scss$/) 
      .use(LOADER_MAP.ifdef)
      .loader(LOADER_MAP.ifdef)
      .options({
        context: { H5: true },
        type: ['css', 'js', 'html'],
      })
      .end();
  }
}

文档

点此查看