利用webpack中的loader來打包css檔案
loader介紹
webpack
本身不支援css
,less
,sass
,js
,image
等相關資源的打包工作,它僅僅提供了一個基礎的框架,在這個框架上藉助於相關的loader
才可以實現css
,less
,sass
,js
,image
等相關資源的打包工作。
package.json
package.json特點
package.json
是Node.js
的包管理檔案,其在其中起到的作用類似於pom.xml
在Maven
中起到的作用。
package.json
中記錄的主要資訊為專案的配置資訊(比如名稱、版本、許可證等資料來源)以及專案的各種依賴包管理模組資訊。
與Maven
Maven
專案中,每個專案的根目錄中都有一個pom.xml
,而同樣的package.json
也同樣存在於每個Node.js
專案的根目錄中。
package.json
由npm init
命令列指令自動生成,由npm install 模組名 --save-dev
將所依賴的模組打入package.json
中。
當專案執行npm i
(等價於npm install
)時,其會依據package.json
中的專案依賴模組資訊自動的去Node.js
倉庫中下載所需依賴,同時在專案的根目錄中生成一個node-modules
專案Node.js
依賴模組倉庫,而我們所下載的Node.js
依賴模組就存放在該本地倉庫中。
package.json注意事項
不要對node-modules倉庫打壓縮包
最後需要特別指出的是,在打專案壓縮包時,千萬不要將node-modules
依賴倉庫打入壓縮包中,否則後果是慘痛的!
如上面所示,上面的打包時間耗時將近1小時(實際1小時還不止),這還不算完,其佔用的磁碟空間也是大的驚人,上面顯示其壓縮包壓縮前是3.4G,壓縮後的大小為996.2MB,也就是說,正因為如此,其龐大的體積一下子讓我的C盤與E盤爆滿了!
雖然說打包時間漫長,打的壓縮包也是體積龐大,然而其node-modules
實際資料夾的大小也不過只有100MB左右。可以說node-modules
之所以出現這種情況,其還是由於其快捷方式所帶來的影響,由於壓縮包在壓縮時會將快捷方式所指向的原始檔也一起打包進來,因而快捷方式所連結資源的大小直接影響到壓縮包體積的大小,而Node.js
正是依靠快捷方式進行模組依賴與迴圈依賴管理的,也就是說,在打壓縮包時,其就不可避免的很多通用的檔案被多次重複性的打包,其最終的結果就是壓縮包本來應該是越壓縮,體積越小的,但是這個卻恰恰相反,反倒是越打壓縮包體積越迅速龐大。
雖然說將node-modules
模組可以打成壓縮包,不過這還是在node-modules
模組內所存在的依賴比較少的情況下才可行,如果要是依賴的內容比較多,更多的情況是打壓縮包失敗。因為壓縮檔案會在打壓縮包之前,會檢索檔案,並將其儲存起來,而其儲存的檔案數是存在一個上限的,當檔案數過多,超過這一上限時,由於壓縮軟體無法對剩餘的檔案進行掃描檢索,因而最終註定會失敗,比如說我在使用好壓壓縮軟體進行壓縮時,當node-modules
記憶體在的依賴模組過多時就出現了打包失敗的情況。
所以說,在這裡,切記,不可對node-modules
倉庫打壓縮包。
配置IDE不掃描node_modules資料夾
由於node-modules
倉庫內檔案眾多,這樣會導致IDE
在掃描node-modules
資料夾時會檢索其語法等資訊,而這也是導致IDE
異常巨卡的主要原因,所以說一般我們會在IDE中進行相應配置,使其不再掃描node-modules
倉庫,這樣可以大幅加快專案的載入與編譯速度。
配置IDE不掃描node-modules
倉庫的方法如下:
生成package.json
將控制檯中的游標切換到專案根目錄中,執行下面程式碼生成package.json
檔案。
npm init
上面命令列在執行時需要我們輸入包名、版本號、等資訊,這裡我直接將包名命名為csspackage
,後面的直接回車,直至最終生成package.json
檔案。
此時生成的package.json
檔案內容為:
{
"name": "csspackage",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
由於我們的loader
需要使用css-loader
和style-loader
共同來處理css
資源的打包工作,所以在使用前必須在專案中安裝這兩個包。
cnpm i css-loader style-loader --save-dev
當運行了上面的那條命令後,我們的package.json
檔案原始碼變為:
{
"name": "csspackage",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.1",
"style-loader": "^0.23.1"
}
}
在這裡,我們明顯可以看到css-loader
和style-loader
的依賴包被打入了package.json
的devDependencies
中。而在控制檯中執行的命令列中的--save
就是執行上述操作的指令。
新增專案css樣式
原始碼在上一篇文章基礎上進行修改
這裡的程式碼是在上一篇的基礎上所做的修改,所以說此處的絕大部分程式碼與上一篇文章中的相同。上一篇文章如下:
現在的專案結構
現在的目錄結構為:
原始碼修改
webpack.config.js
由於現在專案的在package.json
中添加了css-loader
和style-loader
模組,而我們要想使用這兩個模組,那麼我們得告知webpack
才行,也就是說需要在webpack.config.js
中新增對上述兩模組的引用才行,其方式如下,就是在webpack.config.js
中新增下述程式碼:
,module:{
loaders:[
{
test:/\.css$/
,loader:'style-loader!css-loader'
}
]
}
其中module
是專案依賴模組關鍵字,而loaders
關鍵字則是要告知webpack
的資訊,其中的test
後面跟的是正則表示式,其用來匹配所要打包的資原始檔的字尾,而loader
關鍵字則是要告知loader
接下來該使用哪些依賴模組。
main.js
我們之前說過,webpack打包的入口檔案為main.js
,因而我們需要在這裡新增所要引入的site.css
入口檔案資訊,即新增下述程式碼:
require('../assets/css/site.css');
site.css
#v1{
border:1px solid red;
}
示例
完整原始碼
site.css
原始碼:
#v1{
border:1px solid red;
}
calc.js
原始碼:
//1、定義add函式
function add(x,y){
return x + y;
}
//2、匯出add函式
module.exports = add;
main.js
原始碼:
//1、獲取dom物件
var v1 = document.querySelector('#v1');
var v2 = document.querySelector('#v2');
var bt = document.querySelector('#bt');
var res = document.querySelector('#res');
require('../assets/css/site.css');
//2、獲取calc.js中的add方法並且呼叫計算結果
bt.onclick = function () {
//獲取輸入數值並將其轉換成浮點型資料
var val1 = parseFloat(v1.value);
var val2 = parseFloat(v2.value);
//引入calc.js模組
var add = require('./calc');
//呼叫其中的add方法,實現計算功能
res.value = add(val1,val2);
};
index.html
原始碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<input type="text" id="v1"> +
<input type="text" id="v2">
<input type="button" id="bt" value="=">
<input type="text" id="res">
</body>
<script src="dist/build.js"></script>
</html>
package.json
原始碼:
{
"name": "csspackage",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.1",
"style-loader": "^0.23.1"
}
}
  `webpack.config.js`原始碼:
module.exports = {
entry:'./src/main' //指定打包的入口檔案
,output:{
path:__dirname + '/dist'
,filename:'build.js'
}
,module:{
loaders:[
{
test:/\.css$/
,loader:'style-loader!css-loader'
}
]
}
};
執行結果
當準備充足上面的原始碼後,將控制檯中的游標定位於專案根目錄中,執行下述程式碼即可在瀏覽器中檢視相應的結果。
cnpm i
webpack
瀏覽器訪問結果如下:
分析
從上面的結果中我們可以看到,我們在css
中所新增的樣式已經成功的在瀏覽器的頁面中顯示了出來,這說明我們通過package.json
將Node.js
模組載入到node_modules
中;通過webpack.config.js
匹配.css
型別檔案,並載入css-loader
和style-loader
模組整個流程是成功的。