轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：

今天繼續我們的Webpack 4入門教程。在介紹了Webpack的基本概念之後，是時候更深入一點了。這次我們會涉及Webpack中非常強大的一個東西:loader。首先，我們會學習如何使用那些可用的loader。它將包括如何處理css、scss、圖片以及對老版本的JavaScript語言的轉換。讓我們開始吧！

Webpack 4 入門教程繼續 - 什麼是loaders？

在之前的教程，我說Webpack是一個打包器。但這不是它僅有的目的。雖然Webpack天生只能理解JavaScript檔案，但可以利用loader來改變這一點。除了能夠處理多種型別的檔案，Webpack還能修改它們。

新增loader

使用loader最好的方式是在 webpack.config.js 檔案中指定它們。要這麼做，你需要新增 module.rules 屬性。

css-loader

css-loader 能夠翻譯引入的css檔案。

npm install css-loader

考慮如下的配置

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: 'css-loader'
      }
    ]
  }
};

rules

rules 這個屬性是一個陣列，指明你的各個loader。它會作用於匹配到 test 屬性所指定規則的每一個檔案。這個規則，實際上，是一個正規表示式。

use

屬性 use 指明需要對匹配的檔案應用那個loader。

串聯多個loader

有了上面的程式碼，你就能夠在你的JavaScript程式碼中匯入css檔案了。（例如，使用之前我們提到的ES6模組）

但這還不能讓css真正生效。我們需要一種方法讓瀏覽器能夠使用這些css。這種情況下， style-loader 就派上用場了。

npm install style-loader

但那就意味著要對css檔案使用兩個loader。你可以透過串聯多個loader(chaining loaders)來使它們都生效。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
}

你可以看到，我們給了 use 屬性一個陣列。一個非常重要的注意點是，串聯執行的順序是反向的（譯者注：也就是從右往左）。

/* style.css */
body {
  background-color:black;
}
// index.js
import './style.css'

使用上面的配置，打包的工作方式大概是:

Webpack嘗試解析 style.css 檔案
檔名與正規表示式 /\.css$/ 匹配
檔案被 css-loader 編譯
css-loader 處理後的結果會被傳到 style-loader
最後， style-loader 返回一串JavaScript程式碼

預設情況下，打包後的輸出是 ./dist/bundle.js 。現在，這個檔案包含的程式碼會把所有的樣式插入到 <style> 標籤裡面。如果你在HTML中引入了 bundle.js 的連線，在執行完指令碼後，HTML會看起來像這樣:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
  <style type="text/css">body {
    background-color:black;
  }</style></head>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

sass-loader

有了這些知識，你可以輕鬆地給你的工程新增sass/scss支援了。你可以在這裡使用 sass-loader 。

npm install sass-loader

只需要在你的loader鏈裡插入它:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
}

就是這樣，現在你可以引入scss檔案了！檔案在被 css-loader 解析之前，會從scss轉譯成純css。

（譯者注: 如果安裝完sass-loader後，本地執行Webpack出現了和node-sass相關的錯誤，可嘗試再安裝一個node-sass的包解決這個問題，即 npm install node-sass ）

給loader傳入選擇項

實際上，loader可以接受一些選擇項。讓我們用 url-loader 為例來說明。

npm install url-loader file-loader
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader','sass-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 5000
            }
          }
        ]
      }
    ]
  }
};

注意，如果你想要給loader傳入配置項，你不再是把loader以字串形式給 use 屬性。現在它是一個物件，包含兩個屬性: loader （即loader的名字），和 options 。

url-loader 會把你的圖片轉換為base64格式的URI。如果你的圖片檔案很小，那麼把它們直接引入到程式碼中會有更好的效能。這可以減少瀏覽器所發的請求數。但是，如果你的圖片檔案很大，那麼把它們作為單獨的檔案引入可能會更好，因為瀏覽器可以並行載入它們。

這就是為什麼 url-loader 有一個 limit 屬性。它指明瞭一個檔案大小（以byte為單位），當超過這個大小時，檔案將不會被轉為base64的URI。相比較而言， file-loader 僅僅是被用來複製你的檔案。

body {
  background-image: url('./big-background.png');
}
.icon {
  background-image: url('./icon.png');
}

上面的配置會得到下面的結果：

<style type="text/css">body {
  background-image: url(ca3ebe0891c7823ff1e137d8eb5b4609.png); }
.icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAALElEQVR4AWMYIWAU1FPLoP9AXEFI0QEi8H+YYdQyqIEaXuumRhh1DZdUMwoATlYWfwh9eYkAAAAASUVORK5CYII=); }
</style>

因為 big-background.png 比限制的大小更大，它被複製至 dist 資料夾，並被起了一個隨機的名字。而相反， icon.png 檔案被轉換為了base64 URI。

使用babel轉譯JavaScript

另一個流行的loader是 babel-loader 。它允許你使用 Babel 轉譯JavaScript檔案。它解決了如何使用最新版本的JavaScript來編寫程式碼的問題。如果你想支援老版本的瀏覽器，或者想使用現代瀏覽器還沒有實現的功能，Babel都能夠幫到你。

npm install babel-loader @babel/core @babel/preset-env

（譯者注：原文的babel-core和babel-preset-env依賴被替換為@babel/core和@babel/preset-enve，因為新版本的Babel7中對官方提供的依賴使用了名稱空間@babel）

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

注意到，我們這裡使用了 exclude 屬性，它也是一個正規表示式。如果任何檔案與這個表示式相匹配，它將不會被轉譯。

這裡有很多預置項可以滿足你的需求。查閱 Babel的官方文件，你可以在那裡找到它們的列表。

總結

這一次我們學習了Webpack很有用的一個功能：loader。我們介紹了一些可用的loader。利用它們，我們在專案中新增上了對scss的支援。此外，我們還學習如何使用 url-loader 處理圖片。另外一個loader的常用之處是我們討論的利用Babel轉譯JavaScript。在教程未來的部分，我們會深入到loader中，包括寫一個我們自己的loader。

關於葡萄城：

賦能開發者！葡萄城公司成立於 1980 年，是全球領先的集開發工具、商業智慧解決方案、管理系統設計工具於一身的軟體和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟體研發服務，併為中國企業的資訊化提供國際先進的開發工具、軟體和研發諮詢服務。葡萄城的控制元件和軟體產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。

Webpack4乾貨分享(二)，使用loader處理scss,圖片以及轉換JS