webpack系列之loader及簡單的使用
一. loader有什麼用
webpack本身只能打包JavaScript檔案，對於其他資源例如css，圖片，或者其他的語法集比如jsx，是沒有辦法載入的。 這就需要對應的loader將資源轉化，載入進來。
比如
你的工程中，樣式檔案都使用了less語法，是不能被瀏覽器識別的，這時候我們就需要使用對應的loader，來把less語法轉換成瀏覽器可以識別的css語法。
例如一個簡單的less檔案：
轉換前：
.demo { width: 200px; height: 100px; margin: auto; border: 1px solid; p { font-weight:bold; padding-left: 30px; } }
轉換後：
.demo {
width: 200px;
height: 100px;
margin: auto;
border: 1px solid;
}
.demo p {
font-weight: bold;
padding-left: 30px;
}
後面的案例也是拿這個less檔案來做演示的。
二. loader是什麼
先來看一下官方對loader的一個解釋：
A loader is a node module exporting a function
翻譯過來：loader就是一個export出來的function。
既然是node module，所以如果你自己要自定義一個loader，完全可以這麼寫：
module.exports = function (source) {
// todo
}
解釋
-
其中source引數是這個loader要處理的原始檔的字串
-
返回經過**"翻譯"**後的webpack能夠處理的有效模組
如果你所寫的loader需要依賴其他模組的話，那麼同樣以module的寫法，將依賴放在檔案的頂部引進來即可：
var fs = require("fs")
module.exports = function (source) {
// todo
}
如果你希望將處理後的結果（不止一個）返回給下一個loader，那麼就需要呼叫webpack所提供的API。
三. 使用loader
在看了前面的介紹後，接下來給大家介紹一下怎麼使用loader。
使用loader的方式
有三種使用方式，如下：
-
配置（推薦）：在webpack.config.js檔案中指定loader。
-
內聯：在每個import語句中顯式指定loader。
-
CLI：在shell命令中指定它們。
以上三種方式，我們在開發過程中推薦使用第一種方式：
比如你想使用webpack來打包樣式檔案，則可以在webpack.config.js裡新增如下程式碼：
module: {
rules: [
{
test: /\.css$/, // 正則匹配所有.css字尾的樣式檔案
use: ['style-loader', 'css-loader'] // 使用這兩個loader來載入樣式檔案
}
]
}
module.rules允許你在webpack配置中指定多個loader。 這是展示loader的一種簡明方式，並且有助於使程式碼變得簡潔。
上述rules的作用：
webpack在打包過程中，凡是遇到字尾為css的檔案，就會使用style-loader和css-loader去載入這個檔案。
四.案例
在對loader有了一個大概的認識後，來做一個小案例，需求如下：
將上一篇（webpack系列之基本概念和使用）的demo輸出文字居中並用黑框圈起來
目錄結構
程式碼目錄結構如下：
├── node_modules
├── app
│ ├── bundle.js
│ └── index.html
├── package-lock.json
├── package.json
├── src
│ ├── index.js
│ └── main.less
└── webpack.config.js
1. 安裝loader
我們必須使用loader告訴webpack載入less檔案，為此，需要首先安裝相對應的loader：
npm install --save-dev less
npm install --save-dev less-loader
npm install --save-dev css-loader
npm install --save-dev style-loader
這些loader的作用如下：
-
安裝less-loader後可以在js中使用require的方式來載入less檔案了；
-
安裝css-loader後可以在js中載入css檔案；
-
安裝style-loader的目的是為了讓載入的css作為style標籤內容插入到html中。
2. 配置loader
webpack.config.js程式碼如下：
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/index.js", //入口檔案
output: {
path: __dirname + "/app", //打包後的檔案存放的地方
filename: "bundle.js" //打包後輸出檔案的檔名
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader','css-loader', 'less-loader']
}
]
}
}
3.新建樣式檔案
main.less程式碼如下：
.demo {
width: 200px;
height: 100px;
margin: auto;
border: 1px solid;
p {
font-weight:bold;
padding-left: 30px;
}
}
4. 修改入口檔案
在入口檔案index.js裡引入我們的樣式檔案
require ('./main.less');
var element = document.createElement('div');
element.className = 'demo';
var p = document.createElement('p');
p.innerText = 'webpack系列之loader的基本使用！';
element.appendChild(p);
document.body.appendChild(element);
5.打包
在專案根目錄（webpack-demo）下執行打包命令：
➜ webpack-demo webpack
打包成功，會輸出如下：
Hash: 1bb51c6a348686a223db
Version: webpack 3.10.0
Time: 1077ms
Asset Size Chunks Chunk Names
bundle.js 53.8 kB 0 [emitted] main
[0] ./src/index.js 273 bytes {0} [built]
[2] ./src/main.less 1.19 kB {0} [built]
[2] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/main.less 304 bytes {0} [built]
6. 檢視結果
在瀏覽器裡重新整理index.html：
你會發現輸出的文字被一個黑框給圈了起來，並且加粗顯示，這就表明我們的樣式檔案已經生效了，而且從截圖當中也可以看見樣式檔案也插入到了html中。
廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com
五.常用loader
樣式
-
css-loader: 解析css檔案中程式碼
-
style-loader: 將css模組作為樣式匯出到DOM中
-
less-loader: 載入和轉義less檔案
-
sass-loader: 載入和轉義sass/scss檔案
指令碼轉換編譯
-
script-loader: 在全域性上下文中執行一次JavaScript檔案，不需要解析
-
babel-loader: 載入ES6程式碼後使用Babel轉義為ES5後瀏覽器才能解析
Files檔案
-
url-loader: 多數用於載入圖片資源,超過檔案大小顯示則返回data URL
-
raw-loader: 載入檔案原始內容(utf-8格式)
載入框架
-
vue-loader: 載入和轉義vue元件
-
react-hot-loader: 動態重新整理和轉義react元件中修改的部分