webpack4 處理CSS的方法示例

2019-11-19 13:04:00

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

1. 準(zhǔn)備工作

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

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

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

這次我們需要用到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$/, // 針對CSS結(jié)尾的文件設(shè)置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>標(biāo)簽里

通常來說，css放在style標(biāo)簽里可以減少網(wǎng)絡(luò)請求次數(shù)，提高響應(yīng)時間。需要注意的是，在老式 IE 瀏覽器中，對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$/, // 針對CSS結(jié)尾的文件設(shè)置LOADER    use: [     {      loader: "style-loader",      options: {       singleton: true // 處理為單個style標(biāo)簽      }     },     {      loader: "css-loader",      options: {       minimize: true // css代碼壓縮      }     }    ]   }  ] }};

4. 動態(tài)卸載和加載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，來實現(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即可看到頁面背景顏色閃動的效果。

5. 頁面加載css前的transform

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

需要對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，這個文件導(dǎo)出一個函數(shù)，傳入的參數(shù)就是 css 字符串本身。

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

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