webpack—常用的loader加載器的使用

常用的loader加載器的使用

• 前言
• css-loader
• babel-loader
• file-loader

前言

這一章主要講解了webpack中一個很重要的功能，加載器-loader。上一章講到，webpack可以打包不同類型的檔案，而webpack本身僅支援js檔案的子產品化打包，是以其他類型的檔案需要不同的loader進行轉化加載。下面我們将以幾種常見的loader來介紹loader的用法

css-loader

前端應用免不了使用的就是css代碼，如果通過正常的link方式，會将所有的樣式都進行加載，但實際上，頁面使用到的樣式是隻有一部分的。是以很大程度上，樣式并不能被有效的利用。

webpack打包可以使資源按需加載，也就是我用到你再加載，這樣就可以有效的解決上面的問題

示例

編寫一個header的樣式放在main.js中，在main.js中引入該檔案，并在标簽中中引入該類

1. 首先需要安裝對應的子產品css-loader、style-loader

   css-loader主要是将css檔案的内容進行轉化，而style-loader則是将我們轉化後的css代碼重新通過style标簽插入到頁面中。

   yarn add css-loader style-loader --dev
              

   // mian.js
   import './main.css'
              

   .my-header{
     width: 100%;
     height: 50px;
     line-height: 50px;
     background-color: #555;
     color: #fff;
     text-align: center;
   }
              

   1. 在webpack中配置對應的參數

   const path = require('path')
   
   module.exports = {
     mode: 'development',
     entry: './src/main.js',
     output: {
       filename: 'bundle.js',
       path: path.join(__dirname, 'dist')
     },
     module: {
       rules: [{ // 存放所有的loader
         test: /.css$/, // 比對檔案類型的正規表達式
         // loader: '隻能配置一個loader',
         use: ['style-loader', 'css-loader'] // 比對對應檔案後使用的loader，loader執行的順序是從右向左
       }]
     }
   }
              

   rules中存放了loader的規則，每一個對象都是一個loader對象

   test

   屬性是整個正規表達式，用于比對對應類型的檔案，

   /.css$/

   表明比對css字尾的檔案

   use

   屬性則是規定比對到對應檔案後需要使用的loader(一個或多個)，

   use

   屬性可以是字元串或者是數組，都是用于指明loader子產品，需要注意的是loader執行的順序是從右向左.以上面為例子

   ['style-loader', 'css-loader']

   ，當比對到對應的css檔案後，先執行

   css-loader

   ，在執行

   style-loader

   ，這是規定好的。

   loader

   屬性也是規定比對到對應檔案後需要使用的loader，但和use不同的是，它僅可以是字元串，也就是隻能規定一個loader

   1. 打包結果和顯示

      開始打包，并在打包完成後啟動server服務

   yarn webpack
   
   http-server .
              

   

   

babel-loader

babel-loader是用于轉化js檔案的，可以将進階文法轉化為低級文法，也是在項目中較為常用的一個loader

• 為什麼需要使用babel-loader，webpack并不會幫助我們去對代碼進行降級處理，而在一些浏覽器中，是無法使用進階文法的。如果我們希望使用進階文法的新特性，并同時相容低版本的浏覽器，就需要代碼降級處理

子產品安裝

這裡需要安裝三個子產品

babel-loader

、

@babel/core

、

@babel/preset-env

，也是開發依賴

• babel-loader并不做實際的轉化操作，隻是一個平台或者媒介來引入babel
• @babel/core是babel編譯的一個環境
• @babel/preset-env是內建了大部分文法轉化的操作

yarn add babel-loader @babel/core @babel/preset-env --dev
           

配置

基本的使用方式和css-loader是類似的，但babel需要配置對應的選項參數，是以比css-loader要複雜一些，下面我們具體說說

{
	... // 省略代碼請參考前面的内容
	module: {
	   rules: [{
	     test: /.js$/,
	     use: {
	       loader: 'babel-loader',
	       options: {
	         presets: ['@babel/preset-env']
	       }
	     }
	   }]
	 }
 }
           

在配置babel-loader的時候，

use

不是字元串也不是數組，而是一個對象，因為babel-loader并不能幫助我們轉化代碼，真正的轉化操作還需要靠babel子產品來實作，是以我們需要配置loader下面的選項參數，是以需要使用對象，

該對象中

loader

就是我們需要使用的loader的名稱，

options

則是對應的選項參數，我們需要添加一個

presets: ['@babel/preset-env']

屬性，若是我們不配置options參數，則無法轉化成功

代碼實作

我們在其中一個子產品中使用一個箭頭函數，并開啟打包。來看看是否有轉化成功

可以看到，箭頭函數轉化成了普通的函數

file-loader

在項目中我們還可能會使用到圖檔等其他類型的檔案，若是引入之後直接打包可能會報錯

而打包這類檔案資源的loader可以使用file-loader

安裝子產品

同樣第一步我們需要安裝對應的子產品

file-loader

yarn add file-loader --dev
           

配置

{
	...
	module: {
		rules: [{
			test: /.png$/,
			use: 'file-loader'
		}]
	}
}
           

打包

可以看到已經打包成功了，我們開啟服務看一下是否正常

可以看到正常運作

以上内容僅供學習參考