P11.6-webpack配置less-loader | IT人

P11.6-webpack配置less-loader 文章目錄P11.6-webpack配置less-loader1.概述2.建立less專案2.1.建立專案2.2.配置專案3.安裝配置less-loader3.1. Togglenavigation IT人 IT人 P11.6-webpack配置less-loader Bruce小鬼發表於 2020-12-15 Webpack P11.6-webpack配置less-loader 文章目錄 P11.6-webpack配置less-loader1.概述2.建立less專案2.1.建立專案2.2.配置專案 3.安裝配置less-loader3.1.安裝less-loader3.2.配置less-loader 4.構建專案4.1.構建專案4.2.執行專案檢視效果 1.概述 在上一篇介紹瞭如何安裝配置loader，只要是我們需要的擴充套件功能都可以在webpack官網中找到對應的外掛，然後安裝就可以使用它的功能非常的方便。

這篇再介紹下使用less-loader外掛安裝配置，通過這篇案例以後我們就可以複製它的步驟，舉一反三安裝更多的外掛。

2.建立less專案 2.1.建立專案 建立專案這裡不再重複介紹，只需要按照上篇《P11.5-webpack配置css-loader》步驟全部執行一遍就可以了。

P11.5-webpack配置css-loader地址:P11.5-webpack配置css-loader專案完整結構 2.2.配置專案 新增less格式檔案在src的css資料夾中新增normal.less檔案，內容如下。

body{ background-color:red; } main.js引入normal.less //1.使用commonjs的模組化規範匯入模組 const{add,mul}=require('./js/mathUtils'); console.log(add(10,20)); console.log(mul(10,20)); //2.使用ES6的模組化的規範匯入模組 import{name,age,height}from"./js/info"; console.log(name); console.log(age); console.log(height); //匯入css檔案 require('./css/normal.css'); //----------下面都是lsee專案新增的內容---------- //匯入less檔案 require('./css/special.less'); //向index.html中寫入內容測試less是否生效 document.writeln('

你好啊,less!

') 3.安裝配置less-loader webpack的loader使用有兩個步驟： 下載對應的loaderwebpack.config.js配置安裝的loader 3.1.安裝less-loader 訪問webpack官網：https://www.webpackjs.com/loaders/less-loader/ 複製less-loader安裝命令進行安裝 #進入到專案根目錄 cd/04-webpack的less-loader #執行安裝less-loader #因為我們上面安裝區域性webpack指定的版本較低，所以這裡安裝less-loader也要指定低版本，高版本不相容。

npminstall--save-devless-[email protected]4.1.0less 3.2.配置less-loader 複製官網less-loader配置內容到我們專案的webpack.config.js中。

webpack.config.js新增less-loader內容 //匯入path模組，這個path會自動從我們安裝node包中找到path匯出的模組 constpath=require('path') //webpack模組化預設使用的是CommonJS module.exports={ //入口：將webpack打包命令中原始檔入口路徑配置到這裡 entry:'./src/main.js', //出口：將webpack打包命令中輸出檔案路徑配置到這裡 output:{ //./dist改寫為絕對路徑,path.resolve()獲取絕對路徑的方法，__dirname：表示當前檔案的絕對路徑 path:path.resolve(__dirname,'dist'), filename:'bundle.js' }, //配置webpack擴充套件外掛loader module:{ rules:[ { //正則匹配以css結尾的檔案 test:/\.css$/, use:['style-loader','css-loader'] }, //配置less-loader { test:/\.less$/, use:[{ loader:"style-loader"//createsstylenodesfromJSstrings },{ loader:"css-loader"//translatesCSSintoCommonJS },{ loader:"less-loader"//compilesLesstoCSS }] } ] } } 4.構建專案 4.1.構建專案 #進入到專案根目錄 cd/04-webpack的less-loader #npm構建專案 npmrunbuild #構建後的效果 Hash:cfe00ec60ec1e91e1faf Version:webpack3.6.0 Time:622ms AssetSizeChunksChunkNames bundle.js22.8kB0[emitted]main [2]./src/main.js518bytes{0}[built] [3]./src/js/mathUtils.js197bytes{0}[built] [4]./src/js/info.js154bytes{0}[built] [5]./src/css/normal.css1.1kB{0}[built] [6]./node_modules/css-loader/dist/cjs.js!./src/css/normal.css181bytes{0}[built] [8]./src/css/special.less1.23kB{0}[built] [9]./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/css/special.less191bytes{0}[built] +3hiddenmodules 4.2.執行專案檢視效果 使用VScode開發工具執行專案的index.html檔案在瀏覽器上檢視less檔案定義的文字字號和顏色以載入出來。

相關文章 你可能不知道的9條Webpack優化策略 2020-12-04 Webpack webpack非同步載入原理 2020-12-04 Webpack Webpack|webpack.config.js配置及基礎module、plugins打包 2020-12-04 Webpack 十四、css3動畫庫的使用、css3彈性盒子、calc（）、css3預處理、什麼是less以及好處是什麼。

2020-12-05 CSS webpack基礎使用 2020-12-05 Webpack webpack系列：webpack小老弟接了個簡單活 2020-12-05 Webpack 分治法&&動態規劃洛谷P1115最大子段和 2020-12-06 使用webpack手動搭建vue專案 2020-12-07 WebpackVue 跨國合作：ServerlessComponents在騰訊雲的落地和實踐 2020-12-08 騰訊Serverless 前端必備-less的使用 2020-12-08 前端 webpack5新參者 2020-12-10 Webpack 自定義loader讀取*.vue檔案原始碼 2020-12-11 Vue BIOS、UEFI、BootLoader都是些什麼 2020-12-12 iOS STM32在ArduinoIDE環境下的開發（不同的下載方式，不同的BootLoader方式，無需BootLoader方式） 2020-12-12 寫一個為await自動加上catch的loader逐漸瞭解AST以及babel 2020-12-13 人工智慧 Stylus|vue專案中stylus和stylus-loader版本相容問題 2020-12-13 Vue webpackrunoob1.jsbundle.js錯誤 2020-12-13 Webpack sqli-labs靶場實現（二）【不顯示錯誤內容的盲注（布林、時間）】（less-8~10、具體步驟+圖文詳解） 2020-12-14 SQL Java中反射的概述及瞭解ClassLoader 2020-12-14 Java 最新文章 里程碑事件丨.NETMAUI正式釋出 定檔615|數字化基礎軟體自主創新分享周即將來襲，點選獲取“通關金鑰”！ Goselect語句詳解 科創人·神州數碼集團CIO沈暘：最佳實踐模式正在失靈，開源加速分散式創新 Go為什麼要設計iota常量？ 報名進入尾聲，趕快申請加入sealer開源之夏吧！ 'returnawaitpromise'與'returnpromise'這細微的區別 Vue自定義元件之v-model的使用 【轉】理解CI和CD之間的區別 使用並查集處理集合的合併和查詢問題 一起看I/O|GoogleTV和AndroidTVOS的最新進展 上新了亞麻雲|遠端辦公有點上頭？解鎖雲上應用現代化的奧祕