webpack構(gòu)建換膚功能的思路詳解

發(fā)布時(shí)間：2020-09-18 01:46:02 來(lái)源：腳本之家閱讀：133 作者：mrr 欄目：web開發(fā)

最近項(xiàng)目中要實(shí)現(xiàn)一個(gè)換膚的功能，大體想了下，記錄一下思路

要實(shí)現(xiàn)換膚功能，目標(biāo)就是打包生成多份皮膚文件，需要哪個(gè)就用哪個(gè)

打包生成多份皮膚文件因?yàn)轫?xiàng)目是使用webpack構(gòu)建的，要想生成多份css文件，就要在入口中配置多個(gè)入口文件，每個(gè)入口文件會(huì)提取出一個(gè)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" //整個(gè)項(xiàng)目的樣式，在各種皮膚下都保持不變的那部分
theme.blue.color.js 藍(lán)色皮膚js文件
import "./theme/blue.styl"

blue.styl 藍(lán)色皮膚

@require "./css/skinTheme/var.blue" //樣式變量，整體為藍(lán)色風(fēng)格的顏色值
@require "./css/skinTheme/theme.color" //提取出來(lái)的需要換膚的那部分樣式如代碼所示，幾個(gè)主題js文件中只是單純的

引入了相應(yīng)的皮膚樣式文件，這樣，webpack打包后就會(huì)生成幾個(gè)無(wú)用的js文件和一系列皮膚樣式文件

到這一步，就得到了需要的皮膚文件,但是需要注意的是，webpack會(huì)將生成的js、css路徑插入到模板html中，所以，我們打開構(gòu)建后生成index.html會(huì)看到

<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接下來(lái)就需要操作打包后的index.html，將多余的js引用刪掉，將皮膚路徑提取出來(lái)，然后將皮膚引用刪掉也就是要改成這樣的文件

/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>可以寫這樣一個(gè)操作文件的函數(shù)
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，相關(guān)鏈接保存在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()
    }
   }
  })
  /**
   * 刪除無(wú)用的js
   */
  $('script').each((index, item) => {
   const src = $(item).attr('src')
   for (const val of prefix) {
    if (src && src.indexOf(val) !== -1) {
     $(item).remove()
    }
   }
  })
  //插入行內(nèi)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()最后到這里，運(yùn)行 webpack && node cssExtract.js,index.html就變成上面期望的那樣，我們得要了皮膚文件的一個(gè)mapping,并保存在window.cssUrls中，接下來(lái)，通過(guò)切換按鈕的方式切換皮膚還是什么其他的就可以自由發(fā)揮了.
需要說(shuō)明的是，換膚功能的重點(diǎn)是對(duì)樣式的重構(gòu)，將需要換膚的所有樣式提取到一起，通過(guò)變量來(lái)設(shè)置不同的主題

總結(jié)

以上所述是小編給大家介紹的webpack構(gòu)建下?lián)Q膚功能的實(shí)現(xiàn)思路詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

webpack構(gòu)建換膚功能的思路詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽