脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack构建下换肤功能

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构建下换肤功能的实现思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Typescript定义多个接口类型声明的方式小结

    Typescript定义多个接口类型声明的方式小结

    这篇文章主要介绍了Typescript定义多个接口类型声明的方式小结,在 TypeScript 中,您可以使用交叉类型(&)或联合类型(|)来组合多个接口,从而实现多个接口类型的混合,文中通过代码讲解的非常详细,需要的朋友可以参考下
    2025-01-01
  • 复制js对象方法(详解)

    复制js对象方法(详解)

    复制js对象方法，需要的朋友可以参考下
    2013-07-07
  • JS操作JSON要领详细总结

    JS操作JSON要领详细总结

    JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包，下面与大家分享下JSON操作的相关知识
    2013-08-08
  • javascript实现页面滚屏效果

    javascript实现页面滚屏效果

    本文主要介绍了javascript实现页面滚屏效果的方法，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • Bootstrap Modal遮罩弹出层(完整版)

    Bootstrap Modal遮罩弹出层(完整版)

    Bootstrap modal是给外层添加固定fixed，然后内容使用自适应靠上居中方式。今天分享的这篇文章正是这种方式，感兴趣的朋友一起看看吧
    2016-11-11
  • extjs4图表绘制之折线图实现方法分析

    extjs4图表绘制之折线图实现方法分析

    这篇文章主要介绍了extjs4图表绘制之折线图实现方法,结合实例形式分析了extjs4绘制折线图的相关操作技巧、实现方法与相关注意事项,需要的朋友可以参考下
    2020-03-03
  • js计算两个日期间的天数月的实例代码

    js计算两个日期间的天数月的实例代码

    本文通过实例代码给大家介绍了基于js计算两个日期间的天数月，文中还通过一段代码给大家简单说明了js计算两个日期差的方法，感兴趣的朋友跟随小编一起看看吧
    2018-09-09
  • JavaScript查看代码运行效率console.time()与console.timeEnd()用法

    JavaScript查看代码运行效率console.time()与console.timeEnd()用法

    今天小编就为大家分享一篇关于JavaScript查看代码运行效率console.time()与console.timeEnd()用法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • JS如何实现form表单登录验证并使用MD5加密详解

    JS如何实现form表单登录验证并使用MD5加密详解

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化,下面这篇文章主要给大家介绍了关于JS如何实现form表单登录验证并使用MD5加密的相关资料,需要的朋友可以参考下
    2023-06-06
  • JS 排序输出实现table行号自增前端动态生成的tr

    JS 排序输出实现table行号自增前端动态生成的tr

    一个项目，需要对数据进行排序输出，要求有行号，依次递增1.2.3.4.5，使用前端动态生成的tr
    2014-08-08

最新评论