這節課講解webpack4
中打包css
的應用。v4 版本和 v3 版本並沒有特別的出入。
>>> 本節課源碼
>>> 所有課程源碼
教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步>>> 原文地址。 評論或者最新更新,也請移步。
1. 準備工作
眾所周知,CSS 在 HTML 中的常用引入方法有<link>
標籤和<style>
標籤兩種,所以這次就是結合webpack
特點實現以下功能:
- 將 css 通過 link 標籤引入
- 將 css 放在 style 標籤裡
- 動態卸載和載入 css
- 頁面載入 css 前的
transform
展示了這次的目錄代碼結構:
這次我們需要用到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>
標籤引入
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
對於css
的transform
,簡單來說:在載入 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 時候,依舊是綠色。重新重新整理頁面,才會是紅色。