vux-loader 插件列表

script-parser

.vue 文件的 script 部分代码处理

  1. [{
  2.  name: 'script-parser',
  3.  fn: function (source) {
  4.    return source.replace('VARIABLE', 'v2')
  5.  }
  6. }]

style-parser

<style></style> 代码处理

  1. [{
  2.  name: 'style-parser',
  3.  fn: function (source) {
  4.    return source.replace('black', 'white')
  5.  }
  6. }]

template-parser

template代码替换处理

适用于对<template></template>模板代码做自定义处理

  • name 插件名字， template-parser
  • replaceList 非必须，正则匹配列表，将直接调用 replace 方法进行替换
  • fn 非必须，相比params更灵活的方法，可以对字符串进行处理后返回
    插件配置：
  1. [
  2.   name: "template-parser",
  3.   replaceList: [{
  4.     test: /DeathToPM/g,
  5.     replaceString: '微博-随时随地发现新鲜事'
  6.   }, {
  7.     test: /呵呵我们压根没有底线/g,
  8.     replaceString: '我是有底线的'
  9.   }],
  10.   fn: function (templateSource) {
  11.     return templateSource.replace('智障', '机智')
  12.   }
  13. ]

js-parser

项目里js文件处理，在babel-loader前进行处理

  1. [{
  2.  name: 'js-parser',
  3.  fn: function (source) {
  4.    return source.replace('black', 'white')
  5.  }
  6. }]

template-feature-switch

实现根据变量切换template代码

参数：

  • features，变量列表，值只能为true或者false 
  1. {
  2.   name: 'template-feature-switch',
  3.   features: {
  4.     feature1: true,
  5.     feature2: false
  6.   }
  7. }
  1. <template>
  2.   <div>
  3.     <on feature="feature1">
  4.       AWESOME FEATURE 1 is ON
  5.     </on>
  6.     <off feature="feature1">
  7.       AWESOME FEATURE 1 is OFF
  8.     </off>
  9.   </div>
  10. </template>

那么当 feature1 为 true时，将输出 AWESOME FEATURE 1 is ON, 反之则输出 AWESOME FEATURE 1 is OFF。注意on标签内不限定内容，可以为任何标签代码块，但避免在on off 里面再嵌套 on off

vux-ui

vux组件的配套工具，如果没有使用vux, 不需要添加。

如果配合vux使用，需要手动启用。默认不需要设置选项。

该插件做了以下处理：

  • 配置babel编译 vux 的js源码
  • 修改vue-loader为 vux-loader!vue-loader
  • import组件调用解析为单组件引入 
  1. {
  2.   name: 'vux-ui'
  3. }

那么你就可以很方便地引入组件了：

  1. // 0.x
  2. import Group from 'vux/src/components/group'
  3. import Cell from 'vux/src/components/cell'
  5. // 2.x
  6. import { Group, Cell } from 'vux'

i18n

  • 如果你只是调用中文语言的vux组件，那么你不需要做任何配置。

  • 如果你需要调用英文语言的vux组件，需要配置语言

  1. {
  2.   name: 'i18n',
  3.   vuxStaticReplace: true,
  4.   vuxLocale: 'en'
  5. }
  • 如果你想和demo站点一样可以写i18nblock，并且需要动态切换语言，那么需要配置插件抽取i18n的内容，并设置非静态替换 
  1. {
  2.   name: 'i18n',
  3.   vuxStaticReplace: false,
  4.   staticReplace: false,
  5.   extractToFiles: 'src/locales/components.yml',
  6.   localeList: ['en', 'zh-CN']
  7. }

然后你就可以引用vuex-i18n插件实现多语言切换了。

参考 main.js 及 vuex-i18n 文档(仅当参考，你也可以使用其他i18n插件)。

less-theme

注意，path所在文件必须是简单的less变量对，不能import其他文件或者引入变量。

less 变量设置和替换

适用于全局变量替换, 方便切换主题这意味着，你不再需要为每个页面引入全局的less文件了，你只需要设置lang为less就可以直接使用变量了

  1. <style lang="less">
  2. .info {
  3.  color: @font-size;
  4. }
  5. </style>

插件配置：

  1. {
  2.   name: 'less-theme',
  3.   path: 'src/styles/theme.less'
  4. }

duplicate-style

css 重复代码清除

建议使用vux组件的用户使用，因为vux直接引用less，最终构建的css文件确实会有冗余。

在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启，因为dev环境没有必要。

  1. {
  2.   name: 'duplicate-style',
  3.   events: {
  4.     done: function () {
  5.       console.log('done!')
  6.     }
  7.   }
  8. }

html-build-callback

html文件处理事件回调

适用于在写入html(一般为index.html)文件前进行内容修改，比如替换特定内容比如写入js配置变量，改变cdn域名，将manifest文件直接写入html以减少请求等

  1. {
  2.   name: 'html-build-callback',
  3.   events: {
  4.    'after-html-processing': function (data, cb) {
  5.       data.html += 'magic footer'
  6.       cb(null, data)
  7.    }
  8.   }
  9. }

可用事件请参考 html-webpack-plugin

build-done-callback

构建完成事件回调本质上是在webpack plugin的 done 事件后触发

  1. {
  2.  name: 'build-done-callback',
  3.  fn: function () {
  4.    console.log('done!')
  5.  }
  6. }