\n\n.vue 文件的 script 部分代码处理
\n
[{\n name: 'script-parser',\n fn: function (source) {\n return source.replace('VARIABLE', 'v2')\n }\n}]\n
\n\n\n\n
<style></style>
代码处理
[{\n name: 'style-parser',\n fn: function (source) {\n return source.replace('black', 'white')\n }\n}]\n
\n\n\ntemplate代码替换处理
\n
\n\n适用于对
\n<template></template>
模板代码做自定义处理
template-parser
replace
方法进行替换插件配置:
\n[\n name: \"template-parser\",\n replaceList: [{\n test: /DeathToPM/g,\n replaceString: '微博-随时随地发现新鲜事'\n }, {\n test: /呵呵我们压根没有底线/g,\n replaceString: '我是有底线的'\n }],\n fn: function (templateSource) {\n return templateSource.replace('智障', '机智')\n }\n]\n
\n\n\n项目里js文件处理,在babel-loader前进行处理
\n
[{\n name: 'js-parser',\n fn: function (source) {\n return source.replace('black', 'white')\n }\n}]\n
\n实现根据变量切换template代码
\n参数:
\nfeatures
,变量列表,值只能为true或者false{\n name: 'template-feature-switch',\n features: {\n feature1: true,\n feature2: false\n }\n}\n
\n<template>\n <div>\n <on feature=\"feature1\">\n AWESOME FEATURE 1 is ON\n </on>\n <off feature=\"feature1\">\n AWESOME FEATURE 1 is OFF\n </off>\n </div>\n</template>\n
\n那么当 feature1 为 true时,将输出 AWESOME FEATURE 1 is ON
, 反之则输出 AWESOME FEATURE 1 is OFF
。注意on
标签内不限定内容,可以为任何标签代码块,但避免在on off 里面再嵌套 on off
\n vux组件的配套工具,如果没有使用vux, 不需要添加。\n
\n如果配合vux
使用,需要手动启用。默认不需要设置选项。
该插件做了以下处理:
\nbabel
编译 vux 的js源码vux-loader!vue-loader
import
组件调用解析为单组件引入{\n name: 'vux-ui'\n}\n
\n那么你就可以很方便地引入组件了:
\n// 0.x\nimport Group from 'vux/src/components/group'\nimport Cell from 'vux/src/components/cell'\n\n// 2.x\nimport { Group, Cell } from 'vux'\n
\n如果你只是调用中文语言的vux组件,那么你不需要做任何配置。
\n如果你需要调用英文语言的vux组件,需要配置语言
\n{\n name: 'i18n',\n vuxStaticReplace: true,\n vuxLocale: 'en'\n}\n
\ni18n
block,并且需要动态切换语言,那么需要配置插件抽取i18n的内容,并设置非静态替换{\n name: 'i18n',\n vuxStaticReplace: false,\n staticReplace: false,\n extractToFiles: 'src/locales/components.yml',\n localeList: ['en', 'zh-CN']\n}\n
\n然后你就可以引用vuex-i18n
插件实现多语言切换了。
参考 main.js 及 vuex-i18n 文档(仅当参考,你也可以使用其他i18n插件)。
\n\n注意,path所在文件必须是简单的less变量对,不能import其他文件或者引入变量。\n
\n\n\nless 变量设置和替换
\n
\n\n适用于全局变量替换, 方便切换主题
\n
\n这意味着,你不再需要为每个页面引入全局的less文件了,你只需要设置lang为less就可以直接使用变量了
<style lang="less">\n.info {\n color: @font-size;\n}\n</style>\n
\n插件配置:
\n{\n name: 'less-theme',\n path: 'src/styles/theme.less'\n}\n
\n\n\ncss 重复代码清除
\n
\n 建议使用vux组件的用户使用,因为vux直接引用less,最终构建的css文件确实会有冗余。\n
\n\n\n在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启,因为dev环境没有必要。
\n
{\n name: 'duplicate-style',\n events: {\n done: function () {\n console.log('done!')\n }\n }\n}\n
\n\n\nhtml文件处理事件回调
\n
\n\n适用于在写入html(一般为index.html)文件前进行内容修改,比如替换特定内容
\n
\n比如写入js配置变量,改变cdn域名,将manifest文件直接写入html以减少请求等
{\n name: 'html-build-callback',\n events: {\n 'after-html-processing': function (data, cb) {\n data.html += 'magic footer'\n cb(null, data)\n }\n }\n}\n
\n可用事件请参考 html-webpack-plugin
\n\n\n构建完成事件回调
\n
\n本质上是在webpack plugin的 done 事件后触发
{\n name: 'build-done-callback',\n fn: function () {\n console.log('done!')\n }\n}\n
\n