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构建下换肤功能的实现思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
webpack实现热加载自动刷新的方法
本文介绍了webpack实现热加载自动刷新的方法,分享给大家,具体如下: 一.webpack-dev-server 一个轻量级的服务 功能:修改代码及时呈现到浏览器上. 第一步:安装 npm install webpack-dev-server -g 第二步:写入到依赖 npm install webpack-dev-server --save-dev 第三步:修改webpack配置文件 module.exports = { entry:"./js/index.js", output:
-
详解vue-cli + webpack 多页面实例配置优化方法
本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,
-
webpack开发跨域问题解决办法
本文介绍了webpack开发跨域问题解决办法,分享给大家,具体如下: 1. 说明 webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题 2. API 需要代理的 pathname 要加 / module.exports = { devtool: 'cheap-module-source-map', entry: './app/js/index.js' output: { path: path.resolve(__dirname, 'dev'),
-
webpack进阶——缓存与独立打包的用法
本文介绍了webpack进阶--缓存与独立打包的用法,分享给大家,希望对大家有帮助 先来看看最基础的webpack配置: var path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } } 在index.js中引入了lodash库: src/index.js: import
-
webpack配置sass模块的加载的方法
webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置.这里不讲webpack的入门,入门的文章,我推荐这篇<webpack入门>. 为了使用sass,我们需要安装sass的依赖包 //在项目下,运行下列命令行 npm install --save-dev sass-loader //因为sass-loader依赖于node-sass,所以还要安装node-sass npm install --save-dev node-sass 当然了,使用样式的话,css-lo
-
关于webpack代码拆分的解析
最近在学习VUE的时候接触到了webpack,今天就留个小笔记,介绍一下webpack代码拆分 如果利用 webpack 将项目中的所有代码打包在一起,很多时候是不适用的,因为代码中有些东西我们总是希望将其拆分出来.比如: 样式表,希望利用 link 标签引入 使用概率较低的模块,希望后期需要的时候异步加载 框架代码,希望能利用浏览器缓存下部分不易变动的代码 下面是我在阅读 webpack 的官方文档时候,记录的一些笔记,部分地方使用了自己的话来讲,力图让它显得更易懂. 按需加载拆分 webpa
-
webpack实现热更新（实施同步刷新）
本文介绍了webpack实现热更新(实施同步刷新),分享给大家,希望对大家有帮助. 解决方案一: 实现热更新,首先,安装一系列的node命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单. 1.webpack命令安装 npm install webpack -g npm init npm init -yes //可以创建默认的package.json npm install webpack --save-dev npm install path fs html-webpack-plugi
-
详解用webpack把我们的业务模块分开打包的方法
webpack我自己还在摸索学习中,今天给大家分享个用webpack把我们的业务模块分开打包的方法,顺便留个笔记 如何用webpack打包这3个js? 只需修改webpack的配置文件webpack.config.js: // entry是入口文件,可以多个,代表要编译那些js entry:['./src/main.js','./src/login.js','./src/reg.js'], 这样就可以全部打包,最终生成./build/js/build.js 1,那么如果我们想最后生成不同的文件,
-
webpack构建换肤功能的思路详解
最近项目中要实现一个换肤的功能,大体想了下,记录一下思路 要实现换肤功能,目标就是打包生成多份皮肤文件,需要哪个就用哪个 打包生成多份皮肤文件因为项目是使用webpack构建的,要想生成多份css文件,就要在入口中配置多个入口文件,每个入口文件会提取出一个css文件 config.entry={ app: ['./src/app.js'], defaultTheme: ['./src/theme.default.color.js'], orangeTheme:['./src/theme.oran
-
Vue中设置登录验证拦截功能的思路详解
目录 一.解决思路 二.让浏览器存储服务器返回的token 三.在请求中设置访问权限 四.封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的, 一.解决思路 由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端
-
原生js实现拖拽功能基本思路详解
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化;元素的移动就是style.position的 top和left的改变.当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的. 基本思路如下: 拖拽状态
-
vue实现密码显示隐藏功能的思路详解
效果: 思路: 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码: 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制,写成三元表达式的形式: 加入一个图片元素,点击图标元素切换这个布尔值,就可以达到切换显示隐藏,切换布尔值的同时也切换图标. 页面布局 <div id='app'> <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 --
-
使用typescript+webpack构建一个js库的示例详解
目录 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 运行webpack进行打包 测试验证 输出esm模块 已经输出了umd格式的js了, 为什么还要输出esm模块? ----TreeShaking 用tsc输出esm和类型声明文件 package.json中添加exports配置声明模块导出路径 完善package.json文件 用api-extrac
-
基于Apache Hudi在Google云构建数据湖平台的思路详解
自从计算机出现以来,我们一直在尝试寻找计算机存储一些信息的方法,存储在计算机上的信息(也称为数据)有多种形式,数据变得如此重要,以至于信息现在已成为触手可及的商品.多年来数据以多种方式存储在计算机中,包括数据库.blob存储和其他方法,为了进行有效的业务分析,必须对现代应用程序创建的数据进行处理和分析,并且产生的数据量非常巨大!有效地存储数PB数据并拥有必要的工具来查询它以便使用它至关重要,只有这样对该数据的分析才能产生有意义的结果.大数据是一门处理分析方法.有条不紊地从中提取信息或以其他方式处
-
微信小程序换肤功能实现代码(思路详解)
在手机.电脑使用频率如此高的当下,应用可以更换皮肤,以提升美观性,并减轻屏幕对眼睛的刺激,无疑对用户体验有很大的帮助 实现功能 要实现如上更换皮肤的效果,有几个思路: 1.准备皮肤相关的wxss,引入到app.wxss中,方便每个页面使用: 2.设置皮肤时,动态改变wxml中元素的类名或id,使页面应用对应的皮肤: 3.将选中皮肤的值保存在小程序本地缓存中,保证其他页面及下一次打开小程序时,页面展示正确的皮肤: 下面介绍一些实现的细节 wxml <view class="page"
-
JS实现换肤功能的方法实例详解
本文实例讲述了JS实现换肤功能的方法.分享给大家供大家参考,具体如下: 首先准备HTML页面如下: <div id="container"> <div id="header"> <h3>无人驾驶要征服世界,得先解决这些问题</h3> </div> <div id="nav"> <input type="button" id="blue&qu
-
使用vue + less 实现简单换肤功能的示例
做的换肤效果比较简单,只是顶部导航背景色的改变.下面是效果图. 首先,先说一下我最初的思路. 我最初的想法是使用less定义变量,然后通过js来切换变量,通过切换的变量来达到换肤的效果. 我先新建了一个 theme.less文件,代码如下: @theme:@themea; @themea:pink; @themeb:blue; @themec:gray; 如我最开始的想法,应该是通过点击事件来改变变量 @theme 的值. 我用了element-ui这个框架,所以我的下拉菜单的代码也不复杂: <
-
基于vue的换肤功能的示例代码
最近在做的一个几月vue的移动端小demo,其中有一块是实现各个页面的统一换肤功能的.想着写一篇文章,来写一写实现过程中遇到的一些问题. 项目github地址 项目github地址 一 先看一下实现效果吧 设置主题颜色 讲道理这么一个功能,我觉得这么几点可以说下,分步实现: 1. 色值的选取 2. scss 的一些小众用法(多变量CSS值的批量设置) 3. 全局事件巴士的应用 1 色值的选取和原则 推荐大家看下蚂蚁金服的设计指引,里面对常见的交互和界面设计有一套不错的指引和建议,喜欢看书的也可以