webpack构建换肤功能的思路详解
时间:2019-04-10
本文章向大家介绍webpack构建换肤功能的思路详解,主要包括webpack构建换肤功能的思路详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近项目中要实现一个换肤的功能,大体想了下,记录一下思路
要实现换肤功能,目标就是打包生成多份皮肤文件,需要哪个就用哪个
打包生成多份皮肤文件因为项目是使用webpack构建的,要想生成多份css文件,就要在入口中配置多个入口文件,每个入口文件会提取出一个css文件
config.entry={ app: ['./src/app.js'], defaultTheme: ['./src/theme.default.color.js'], orangeTheme:['./src/theme.orange.color.js'], blueTheme:['./src/theme.blue.color.js'], }
app.js中
import "./app.styl" //整个项目的样式,在各种皮肤下都保持不变的那部分 theme.blue.color.js 蓝色皮肤js文件 import "./theme/blue.styl"
blue.styl 蓝色皮肤
@require "./css/skinTheme/var.blue" //样式变量,整体为蓝色风格的颜色值 @require "./css/skinTheme/theme.color" //提取出来的需要换肤的那部分样式如代码所示,几个主题js文件中只是单纯的
引入了相应的皮肤样式文件,这样,webpack打包后就会生成几个无用的js文件和一系列皮肤样式文件
到这一步,就得到了需要的皮肤文件,但是需要注意的是,webpack会将生成的js、css路径插入到模板html中,所以,我们打开构建后生成index.html会看到
<html> <head> <link rel="stylesheet" href="app.xxxx.css" rel="external nofollow" rel="external nofollow" > <link rel="stylesheet" href="defaultTheme.xxxxx.css" rel="external nofollow" > <link rel="stylesheet" href="orangeTheme.xxxxx.css" rel="external nofollow" > <link rel="stylesheet" href="blueTheme.xxxxx.css" rel="external nofollow" > </head> <body> <script src="app.xxxx.js"></script> <script src="defaultTheme.xxxx.js"></script> <script src="orangeTheme.xxxx.js"></script> <script src="blueTheme.xxxx.js"></script> </body>
</html>操作index.html接下来就需要操作打包后的index.html,将多余的js引用删掉,将皮肤路径提取出来,然后将皮肤引用删掉也就是要改成这样的文件
/build/index.html <html> <head> <script> window.cssUrls={ "defaultTheme":"/defaultTheme.4bdb738cdc062e7842ce.css", "orangeTheme":"/orangeTheme.4bdb738cdc062e7842ce.css","blueTheme":"/blueTheme.4bdb738cdc062e7842ce.css" } </script> <link rel="stylesheet" href="app.xxxx.css" rel="external nofollow" rel="external nofollow" > </head> <body> <script src="app.xxxx.js"></script> </body> </html>可以写这样一个操作文件的函数 cssExtract.js const DISTPATH = 'build/index.html' const cheerio = require('cheerio') const fs = require('fs') const chalk = require('chalk') const prefix = ['defaultTheme', 'orangeTheme', 'blueTheme'] const cssUrls = {} function extractCss() { fs.readFile(DISTPATH, 'utf8', (err, data) => { if (err) { throw err } const $ = cheerio.load(data) /** * 删除所有主题css,相关链接保存在window.cssUrls中 */ $('link').each((index, item) => { const href = $(item).attr('href') for (const val of prefix) { if (href.indexOf(val) !== -1) { cssUrls[val] = href $(item).remove() } } }) /** * 删除无用的js */ $('script').each((index, item) => { const src = $(item).attr('src') for (const val of prefix) { if (src && src.indexOf(val) !== -1) { $(item).remove() } } }) //插入行内js $('base').after(`<script>window.cssUrls=${JSON.stringify(cssUrls)}</script>`) fs.writeFile(DISTPATH, $.html(), err => { if (err) { throw err } console.log(chalk.cyan('extract css url complete.\n')) }) }) }
extractCss()最后到这里,运行 webpack && node cssExtract.js,index.html就变成上面期望的那样,我们得要了皮肤文件的一个mapping,并保存在window.cssUrls中,接下来,通过切换按钮的方式切换皮肤还是什么其他的就可以自由发挥了.
需要说明的是,换肤功能的重点是对样式的重构,将需要换肤的所有样式提取到一起,通过变量来设置不同的主题
总结
以上所述是小编给大家介绍的webpack构建下换肤功能的实现思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android自定义底部弹出框ButtomDialog
- Android使用SoundPool播放音效实例
- 安装OpenLDAP和客户端
- 【- Flutter 桌面篇 -】 FlutterUnit win版闪亮登场
- Android实现视频弹幕功能
- flutter 中监听滑动事件
- 如何通过Cloudera Manager页面自定义图表
- 【-Flutter组件篇- 】1.20新增组件InteractiveViewer
- Android使用SoundPool实现播放音效
- 【- FlutterUnit重大更新 -】Flutter要点集录.md
- Android实现美团外卖底部导航栏动画
- Kudu遇到的问题
- 【 -Flutter自定义组件- 】Wrapper组件,包裹装饰你的一切
- Android Shape属性创建环形进度条
- Ranger同步ldap组问题