可以訪問 這里 查看更多關于大資料平臺建設的原創文章，
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，
使用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中，
![圖片描述][3]
五.常用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組件中修改的部分
關注微信公眾號
歡迎大家關注我的微信公眾號閱讀更多原創文章：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/5456.html
標籤：JavaScript