摘要:版本和版本并沒有特別的出入。需要注意的是,在老式瀏覽器中,對(duì)標(biāo)簽的數(shù)量是有要求的。這樣,方便開發(fā)者根據(jù)業(yè)務(wù)需要,對(duì)進(jìn)行相關(guān)處理。需要注意的是是在引入前根據(jù)需要修改,所以之后是不會(huì)改變的。重新刷新頁(yè)面,才會(huì)是紅色。
這節(jié)課講解webpack4中打包css的應(yīng)用。v4 版本和 v3 版本并沒有特別的出入。
>>> 本節(jié)課源碼
>>> 所有課程源碼
教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片,網(wǎng)速過慢的朋友請(qǐng)移步>>> 原文地址。 評(píng)論或者最新更新,也請(qǐng)移步。
1. 準(zhǔn)備工作眾所周知,CSS 在 HTML 中的常用引入方法有標(biāo)簽和標(biāo)簽兩種,所以這次就是結(jié)合webpack特點(diǎn)實(shí)現(xiàn)以下功能:
將 css 通過 link 標(biāo)簽引入
將 css 放在 style 標(biāo)簽里
動(dòng)態(tài)卸載和加載 css
頁(yè)面加載 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代碼如下:
2. CSS通過標(biāo)簽引入Document
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)擊頁(yè)面才會(huì)引入樣式!!! if (!clicked) { import("./css/base.css"); } });3. CSS放在標(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即可看到頁(yè)面背景顏色閃動(dòng)的效果。
5. 頁(yè)面加載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。
需要注意的是:transform是在 css 引入前根據(jù)需要修改,所以之后是不會(huì)改變的。所以上方代碼不是響應(yīng)式,當(dāng)把屏幕寬度拉長(zhǎng)到大于 1000 時(shí)候,依舊是綠色。重新刷新頁(yè)面,才會(huì)是紅色。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/97126.html
摘要:首先安裝在中引入并添加修改和的之后,可見中引入了一個(gè)文件也正是我們?cè)诤椭械拇a可以幫助我們處理,如自動(dòng)添加瀏覽器前綴。在根目錄下創(chuàng)建修改和的在中加入打包之后打開,可見瀏覽器前綴已經(jīng)加上了 1. 在項(xiàng)目中使用 less? 在 src/assets/ 下新建 common.less : body{ background: #fafafa; padding: 20px; } show...
摘要:全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程,一共分成節(jié),每節(jié)都有講解,并且準(zhǔn)備了配套代碼。奈何深感水平不夠,只有一腔熱情,所以直接開放了教程和源碼。 webpack-demos:全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客:godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享!開源教程(webpack、設(shè)計(jì)模式)、面試刷題(偏前...
摘要:按照我們的仿真的環(huán)境,最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法,請(qǐng)查看系列教程六處理系列教程五處理所以,我們的文件如下安裝完相關(guān)插件后,我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片,網(wǎng)速過慢的朋友請(qǐng)移步 原文地址 有空就來看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示):s...
摘要:按照我們的仿真的環(huán)境,最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法,請(qǐng)查看系列教程六處理系列教程五處理所以,我們的文件如下安裝完相關(guān)插件后,我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片,網(wǎng)速過慢的朋友請(qǐng)移步 原文地址 有空就來看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示):s...
摘要:傳送門系列教程一初識(shí)系列教程二創(chuàng)建項(xiàng)目,打包第一個(gè)文件系列教程三自動(dòng)生成項(xiàng)目中的文件系列教程四處理項(xiàng)目中的資源文件一系列教程五處理項(xiàng)目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發(fā)環(huán)境和生產(chǎn)環(huán)境 在前端開發(fā)日益復(fù)雜的今天,我們需要一個(gè)工具來幫助我們管理項(xiàng)目資源,打包、編譯、預(yù)處理、后處理等等。webpack的出現(xiàn)無疑是前端開發(fā)者的福音,我的博文只...
閱讀 3564·2023-04-26 00:05
閱讀 954·2021-11-11 16:55
閱讀 3522·2021-09-26 09:46
閱讀 3517·2019-08-30 15:56
閱讀 909·2019-08-30 15:55
閱讀 2934·2019-08-30 15:53
閱讀 1940·2019-08-29 17:11
閱讀 814·2019-08-29 16:52