webpack构建换肤功能的思路详解
更新时间：2017年11月27日 14:14:57 投稿：mrr
这篇文章主要介绍了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构建下换肤功能的实现思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
layui是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，常适合网页界面的快速开发，这篇文章主要介绍了layui框架教程,需要的朋友可以参考下2022-09-09
这篇文章主要给大家介绍了关于一些在ts上费过时间的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-11-11
前几天用jquery做了一个JS的图片轮播效果，现在用原生的javascript代码实现同样的功能，当练习用吧，代码写得不是很满意。2010-09-09
在浏览器中使用JavaScript获取本机IP地址是不可行的,因为浏览器的安全策略禁止JavaScript访问这样的信息,这篇文章主要给大家介绍了关于JavaScript获取本机IP地址的三种常用方式,需要的朋友可以参考下2023-12-12
最近在学习的时候到了基础算法这一章节，让我对js内置对象方法的掌握还有思维逻辑都得到了提升，所借此机会来写一写学习心得和总结。下面这篇文章主要介绍了利用javascript实现翻转字符串与回文的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
这篇文章主要介绍了javascript实现C语言经典程序题的解题思路，感兴趣的小伙伴们可以参考一下2015-11-11
在前端开发中，我们经常需要在不同的组件或类之间共享功能代码，Mixin提供了一种非常灵活的方式，可以让我们在不破坏继承关系的前提下，将功能代码复用到多个对象中，文章通过代码示例介绍mixin提升代码复用性的方法和好处,需要的朋友可以参考下2023-06-06
今天小编就为大家分享一篇解决LayUI数据表格复选框不居中显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
url里的参数内容包含&符合，我有两种方法解决一是：在页面用JS转码;二是：在后端处理，另外还有网络分享的一些方法，感兴趣的朋友可以参考下哈2013-04-04
对于对于一些表格按价格 等进行排序，方便用户对当前页面的高低价格排序，用户体验性好2009-02-02
最新评论