webpack4處理CSS的方法示例

這節(jié)課講解webpack4中打包c(diǎn)ss的應(yīng)用。v4 版本和 v3 版本并沒有特別的出入。

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括洛龍網(wǎng)站建設(shè)、洛龍網(wǎng)站制作、洛龍網(wǎng)頁制作以及洛龍網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，洛龍網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到洛龍省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

1. 準(zhǔn)備工作

眾所周知，CSS 在 HTML 中的常用引入方法有<link>標(biāo)簽和<style>標(biāo)簽兩種，所以這次就是結(jié)合webpack特點(diǎn)實(shí)現(xiàn)以下功能：

將 css 通過 link 標(biāo)簽引入
將 css 放在 style 標(biāo)簽里
動(dòng)態(tài)卸載和加載 css
頁面加載 css 前的transform

下圖展示了這次的目錄代碼結(jié)構(gòu)：

webpack4 處理CSS的方法示例

這次我們需要用到css-loader，file-loader等 LOADER，package.json如下：

{
 "devDependencies": {
  "css-loader": "^1.0.0",
  "file-loader": "^1.1.11",
  "style-loader": "^0.21.0"
 }
}

其中，base.css代碼如下：

*,
body {
 margin: 0;
 padding: 0;
}
html {
 background: red;
}

index.html代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <script src="./dist/app.bundle.js"></script>
</body>
</html>

2. CSS通過<link>標(biāo)簽引入

link 標(biāo)簽通過引用 css 文件，所以需要借助file-loader來將 css 處理為文件。

webpack.config.js:

const path = require("path");

module.exports = {
 entry: {
  app: "./src/app.js"
 },
 output: {
  publicPath: __dirname + "/dist/",
  path: path.resolve(__dirname, "dist"),
  filename: "[name].bundle.js"
 },
 module: {
  rules: [
   {
    test: /\.css$/, // 針對(duì)CSS結(jié)尾的文件設(shè)置LOADER
    use: [
     {
      loader: "style-loader/url"
     },
     {
      loader: "file-loader"
     }
    ]
   }
  ]
 }
};

為了讓效果更顯著，編寫如下app.js:

let clicked = false;
window.addEventListener("click", function() {
 // 需要手動(dòng)點(diǎn)擊頁面才會(huì)引入樣式?。?！
 if (!clicked) {
  import("./css/base.css");
 }
});

3. CSS放在<style>標(biāo)簽里

通常來說，css放在style標(biāo)簽里可以減少網(wǎng)絡(luò)請(qǐng)求次數(shù)，提高響應(yīng)時(shí)間。需要注意的是，在老式 IE 瀏覽器中，對(duì)style標(biāo)簽的數(shù)量是有要求的。

app.js和第二部分一樣，webpack.config.js配置修改如下：

const path = require("path");

module.exports = {
 entry: {
  app: "./src/app.js"
 },
 output: {
  publicPath: __dirname + "/dist/",
  path: path.resolve(__dirname, "dist"),
  filename: "[name].bundle.js"
 },
 module: {
  rules: [
   {
    test: /\.css$/, // 針對(duì)CSS結(jié)尾的文件設(shè)置LOADER
    use: [
     {
      loader: "style-loader",
      options: {
       singleton: true // 處理為單個(gè)style標(biāo)簽
      }
     },
     {
      loader: "css-loader",
      options: {
       minimize: true // css代碼壓縮
      }
     }
    ]
   }
  ]
 }
};

4. 動(dòng)態(tài)卸載和加載CSS

style-loader為 css 對(duì)象提供了use()和unuse()兩種方法，借助這兩種方法，可以方便快捷地加載和卸載 css 樣式。

首先，需要配置webpack.config.js:

const path = require("path");

module.exports = {
 entry: {
  app: "./src/app.js"
 },
 output: {
  publicPath: __dirname + "/dist/",
  path: path.resolve(__dirname, "dist"),
  filename: "[name].bundle.js"
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     {
      loader: "style-loader/useable" // 注意此處的style-loader后面的 useable
     },
     {
      loader: "css-loader"
     }
    ]
   }
  ]
 }
};

然后，我們修改我們的app.js，來實(shí)現(xiàn)每 0.5s 換一次背景顏色：

import base from "./css/base.css"; // import cssObj from '...'
var flag = false;
setInterval(function() {
 // unuse和use 是 cssObj上的方法
 if (flag) {
  base.unuse();
 } else {
  base.use();
 }
 flag = !flag;
}, 500);

打包后打開index.html即可看到頁面背景顏色閃動(dòng)的效果。

5. 頁面加載css前的transform

對(duì)于css的transform，簡(jiǎn)單來說：在加載 css 樣式前，可以更改 css。這樣，方便開發(fā)者根據(jù)業(yè)務(wù)需要，對(duì) css 進(jìn)行相關(guān)處理。

需要對(duì)style-loader增加options.transform屬性，值為指定的 js 文件，所以, webpack.config.js配置如下：

const path = require("path");

module.exports = {
 entry: {
  app: "./src/app.js"
 },
 output: {
  publicPath: __dirname + "/dist/",
  path: path.resolve(__dirname, "dist"),
  filename: "[name].bundle.js"
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     {
      loader: "style-loader",
      options: {
       transform: "./css.transform.js" // transform 文件
      }
     },
     {
      loader: "css-loader"
     }
    ]
   }
  ]
 }
};

下面，我們編寫css.transform.js，這個(gè)文件導(dǎo)出一個(gè)函數(shù)，傳入的參數(shù)就是 css 字符串本身。

module.exports = function(css) {
 console.log(css); // 查看css
 return window.innerWidth < 1000 ? css.replace("red", "green") : css; // 如果屏幕寬度 < 1000, 替換背景顏色
};

在app.js中引入 css 文件即可：

import base from "./css/base.css";

我們打開控制臺(tái)，如下圖所示，當(dāng)屏幕寬度小于 1000 時(shí)候，css 中的red已經(jīng)被替換為了green。

webpack4 處理CSS的方法示例

需要注意的是：transform是在 css 引入前根據(jù)需要修改，所以之后是不會(huì)改變的。所以上方代碼不是響應(yīng)式，當(dāng)把屏幕寬度拉長(zhǎng)到大于 1000 時(shí)候，依舊是綠色。重新刷新頁面，才會(huì)是紅色。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標(biāo)題：webpack4處理CSS的方法示例
當(dāng)前URL：http://aaarwkj.com/article34/ihphpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、全網(wǎng)營(yíng)銷推廣、做網(wǎng)站、標(biāo)簽優(yōu)化、軟件開發(fā)、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

webpack4處理CSS的方法示例