当前位置: 首页 > 编程笔记 >

webpack构建换肤功能的思路详解

艾志尚
2023-03-14
本文向大家介绍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构建下换肤功能的实现思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍js简单实现网页换肤功能,包括了js简单实现网页换肤功能的使用技巧和注意事项,需要的朋友参考一下 我发现网上写换肤功能写的有点长,就想想如何更简单方法实现这个功能,于是我自己写了一个。 html css文件 default.css red.css green.css  PS:当然设置主题的参数也可以保存到后端(推荐),防止禁用cookies主题无法生效。 以上就是本文的全部内容,希望

  • 本文向大家介绍Node.js 条形码识别程序构建思路详解,包括了Node.js 条形码识别程序构建思路详解的使用技巧和注意事项,需要的朋友参考一下 在这篇文章中,我们将展示一个非常简单的方法构建一个自定义的 Node 模块,该模块封装了Dynamsoft Barcode Reader SDK ,支持 Windows、Linux 和 OS X,同时我们将演示如何集成这块模块实现一个在线的条形码读取应

  • 本文向大家介绍用vue怎么实现一个换肤的功能?相关面试题,主要包含被问及用vue怎么实现一个换肤的功能?时的应答技巧和注意事项,需要的朋友参考一下 在vue.config.js同级目录下创建 / 文件可以进行开发/生产环境的全局变量配置(需前缀),在项目中根据全局变量加载对应的文件实现换肤

  • 本文向大家介绍详解Webpack DLL用法以及功能,包括了详解Webpack DLL用法以及功能的使用技巧和注意事项,需要的朋友参考一下 在使用webpack过程中,本人也发现发现构建速度非常慢,Webpack性能优化的方式有很多种,本文介绍了dll,dll是一种最简单粗暴并且极其有效的优化方式。 前言 在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodas

  • 本文向大家介绍js仿百度切换皮肤功能(html+css),包括了js仿百度切换皮肤功能(html+css)的使用技巧和注意事项,需要的朋友参考一下 js仿百度切换皮肤效果:(换肤出来一个div,选择你想要的图片,作为网页背景,保存)  要点:cookie保存状态 html代码: css代码: js代码: 效果图: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。 作者

  • 本文向大家介绍webpack构建的详细流程探底,包括了webpack构建的详细流程探底的使用技巧和注意事项,需要的朋友参考一下 作为模块加载和打包神器,只需配置几个文件,加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合,它的整体流程及思想对我们来说还是很透明的。 本文旨在搞清楚从命令行下敲下 webpack 命令,或者配置 npm script