利用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模組整個流程是成功的。