webpack4 系列教程(五): 處理CSS

來源:互聯網
上載者:User

這節課講解webpack4中打包css的應用。v4 版本和 v3 版本並沒有特別的出入。

>>> 本節課源碼

>>> 所有課程源碼

教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步>>> 原文地址。 評論或者最新更新,也請移步。

1. 準備工作

眾所周知,CSS 在 HTML 中的常用引入方法有<link>標籤和<style>標籤兩種,所以這次就是結合webpack特點實現以下功能:

  1. 將 css 通過 link 標籤引入
  2. 將 css 放在 style 標籤裡
  3. 動態卸載和載入 css
  4. 頁面載入 css 前的transform

展示了這次的目錄代碼結構:

這次我們需要用到css-loaderfile-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>標籤引入

link 標籤通過引用 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$/, // 針對CSS結尾的檔案設定LOADER        use: [          {            loader: "style-loader/url"          },          {            loader: "file-loader"          }        ]      }    ]  }};

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

let clicked = false;window.addEventListener("click", function() {  // 需要手動點擊頁面才會引入樣式!!!  if (!clicked) {    import("./css/base.css");  }});
3. CSS放在 <style>標籤裡

通常來說,css放在style標籤裡可以減少網路請求次數,提高回應時間。需要注意的是,在老式 IE 瀏覽器中,對style標籤的數量是有要求的

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$/, // 針對CSS結尾的檔案設定LOADER        use: [          {            loader: "style-loader",            options: {              singleton: true // 處理為單個style標籤            }          },          {            loader: "css-loader",            options: {              minimize: true // css代碼壓縮            }          }        ]      }    ]  }};
4. 動態卸載和載入 CSS

style-loader為 css 對象提供了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,來實現每 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即可看到頁面背景顏色閃動的效果。

5. 頁面載入 css前的 transform

對於csstransform,簡單來說:在載入 css 樣式前,可以更改 css。這樣,方便開發人員根據業務需要,對 css 進行相關處理。

需要對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,這個檔案匯出一個函數,傳入的參數就是 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";

我們開啟控制台,如所示,當螢幕寬度小於 1000 時候,css 中的red已經被替換為了green

需要注意的是:transform是在 css 引入前根據需要修改,所以之後是不會改變的。所以上方代碼不是響應式,當把螢幕寬度拉長到大於 1000 時候,依舊是綠色。重新重新整理頁面,才會是紅色。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.