摘要:教程所示圖片使用的是倉(cāng)庫(kù)圖片,網(wǎng)速過慢的朋友請(qǐng)移步原文系列教程七提取和懶加載。個(gè)人技術(shù)小站有空就來看看我一直都在本節(jié)課講解在中的提取和懶加載。值得一提的是,和在的懶加載上的處理方法有著巨大差別。
教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片,網(wǎng)速過慢的朋友請(qǐng)移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懶加載。
個(gè)人技術(shù)小站: https://godbmw.com 有空就來看看, 我一直都在
本節(jié)課講解在webpack v4中的 SCSS 提取和懶加載。值得一提的是,v4和v3在 Scss 的懶加載上的處理方法有著巨大差別。
>>> 本節(jié)課源碼
>>> 所有課程源碼
1. 準(zhǔn)備工作關(guān)于 SCSS 處理的基礎(chǔ),請(qǐng)參考webpack4 系列教程(六): 處理 SCSS。
本節(jié)課主要涉及 SCSS 在懶加載下提取的相關(guān)配置和插件使用。
下圖展示了這次的目錄代碼結(jié)構(gòu):
為了實(shí)現(xiàn) SCSS 懶加載,我們使用了extract-text-webpack-plugin插件。
需要注意,在安裝插件的時(shí)候,應(yīng)該安裝針對(duì)v4版本的extract-text-webpack-plugin。npm 運(yùn)行如下命令:npm install --save-dev extract-text-webpack-plugin@next
其余配置,與第六課相似。package.json配置如下:
{ "devDependencies": { "css-loader": "^1.0.0", "extract-text-webpack-plugin": "^4.0.0-beta.0", "node-sass": "^4.9.2", "sass-loader": "^7.0.3", "style-loader": "^0.21.0", "webpack": "^4.16.0" } }
關(guān)于我們的 scss 文件下的樣式文件,base.scss:
// 網(wǎng)站默認(rèn)背景色:red $bgColor: red !default; *, body { margin: 0; padding: 0; } html { background-color: $bgColor; }
common.scss:
// 覆蓋原來顏色:green html { background-color: green !important; }2. 使用ExtractTextPlugin
使用extract-text-webpack-plugin,需要在webpack.config.js的plugins選項(xiàng)和rules中scss的相關(guān)選項(xiàng)進(jìn)行配置。
webpack.config.js:
const path = require("path"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: { app: "./src/app.js" }, output: { publicPath: __dirname + "/dist/", path: path.resolve(__dirname, "dist"), filename: "[name].bundle.js", chunkFilename: "[name].chunk.js" }, module: { rules: [ { test: /.scss$/, use: ExtractTextPlugin.extract({ // 注意 1 fallback: { loader: "style-loader" }, use: [ { loader: "css-loader", options: { minimize: true } }, { loader: "sass-loader" } ] }) } ] }, plugins: [ new ExtractTextPlugin({ filename: "[name].min.css", allChunks: false // 注意 2 }) ] };
在配置中,注意 1中的callback配置項(xiàng),針對(duì) 不提取為多帶帶css文件的scss樣式 應(yīng)該使用的 LOADER。即使用style-loader將 scss 處理成 css 嵌入網(wǎng)頁(yè)代碼。
注意 2中的allChunks必須指明為false。否則會(huì)包括異步加載的 CSS!
3. SCSS引用和懶加載在項(xiàng)目入口文件app.js中,針對(duì) scss 懶加載,需要引入以下配置代碼:
import "style-loader/lib/addStyles"; import "css-loader/lib/css-base";
剩下我們先設(shè)置背景色為紅色,在用戶點(diǎn)擊鼠標(biāo)后,懶加載common.scss,使背景色變?yōu)榫G色。剩余代碼如下:
import "./scss/base.scss"; var loaded = false; window.addEventListener("click", function() { if (!loaded) { import(/* webpackChunkName: "style"*/ "./scss/common.scss").then(_ => { // chunk-name : style console.log("Change bg-color of html"); loaded = true; }); } });4. 打包和引入
根據(jù)我們?cè)?b>app.js中的webpackChunkName的配置,可以猜測(cè),打包結(jié)果中有:style.chunk.js 文件。
命令行執(zhí)行webpack打包后,/dist/目錄中的打包結(jié)果如下:
最后,我們需要在 html 代碼中引入打包結(jié)果中的、非懶加載的樣式(/dist/app.min.css)和 js 文件(/dist/app.bundle.js)。
Document
終
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/97282.html
摘要:全網(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ì)模式)、面試刷題(偏前...
摘要:課程地址全部課程地址立即進(jìn)入課程源碼目錄截至按照知識(shí)點(diǎn),目錄分成了個(gè)文件夾之后還會(huì)持續(xù)更新。個(gè)人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過時(shí),最近內(nèi)容請(qǐng)看:https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的幫助下,開發(fā)者可以輕松地實(shí)現(xiàn)加密代碼、多平臺(tái)兼容。而最重要的...
摘要:本節(jié)課講解打包單頁(yè)應(yīng)用過程中的代碼分割和代碼懶加載。不同于多頁(yè)面應(yīng)用的提取公共代碼,單頁(yè)面的代碼分割和懶加載不是通過配置來實(shí)現(xiàn)的,而是通過的寫法和內(nèi)置函數(shù)實(shí)現(xiàn)的。個(gè)人網(wǎng)站原文鏈接系列教程四單頁(yè)面解決方案代碼分割和懶加載 本節(jié)課講解webpack4打包單頁(yè)應(yīng)用過程中的代碼分割和代碼懶加載。不同于多頁(yè)面應(yīng)用的提取公共代碼,單頁(yè)面的代碼分割和懶加載不是通過webpack配置來實(shí)現(xiàn)的,而是通過...
摘要:只需要在處理的配置上增加編譯的即可。了解更多處理的內(nèi)容本節(jié)課源碼所有課程源碼教程所示圖片使用的是倉(cāng)庫(kù)圖片,網(wǎng)速過慢的朋友請(qǐng)移步原文地址系列教程六處理。根據(jù)規(guī)則放在最后的首先被執(zhí)行。 這節(jié)課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。了解更多處理css的內(nèi)容 >>> >>> 本節(jié)課源碼 >>> 所有課程源碼 教程所示圖片使用的是...
摘要:然而,瀏覽器對(duì)這些高級(jí)語(yǔ)法的支持性并不是非常好。是一個(gè)編譯器,能夠讓我們放心的使用新一代語(yǔ)法。在中使用安裝修改,加入新的遇到文件就先用處理,表示排除文件夾中的文件。 1. 什么是Babel 如今 ES6 語(yǔ)法在開發(fā)中已經(jīng)非常普及,甚至也有許多開發(fā)人員用上了 ES7 或 ES8 語(yǔ)法。然而,瀏覽器對(duì)這些高級(jí)語(yǔ)法的支持性并不是非常好。因此為了讓我們的新語(yǔ)法能在瀏覽器中都能順利運(yùn)行,Babe...
閱讀 2511·2021-09-26 10:18
閱讀 3386·2021-09-22 10:02
閱讀 3183·2019-08-30 15:44
閱讀 3326·2019-08-30 15:44
閱讀 1831·2019-08-29 15:25
閱讀 2572·2019-08-26 14:04
閱讀 2035·2019-08-26 12:15
閱讀 2437·2019-08-26 11:43