轉(zhuǎn)載請注明出處： 葡萄城官網(wǎng) ，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。 
原文出處： https://wanago.io/2018/07/16/webpack-4-course-part-two-webpack-4-course-part-two-loaders/

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

創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！專注中小微企業(yè)官網(wǎng)定制，做網(wǎng)站、成都做網(wǎng)站，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

Webpack 4 入門教程繼續(xù) - 什么是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  這個屬性是一個數(shù)組，指明你的各個loader。它會作用于匹配到  test  屬性所指定規(guī)則的每一個文件。這個規(guī)則，實際上，是一個正則表達(dá)式。

use

屬性  use  指明需要對匹配的文件應(yīng)用那個loader。

串聯(lián)多個loader

有了上面的代碼，你就能夠在你的JavaScript代碼中導(dǎo)入css文件了。（例如，使用 之前我們提到的ES6模塊 ）

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

npm install style-loader

但那就意味著要對css文件使用兩個loader。你可以通過串聯(lián)多個loader(chaining loaders)來使它們都生效。

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

你可以看到，我們給了  use  屬性一個數(shù)組。一個非常重要的注意點是，串聯(lián)執(zhí)行的順序是反向的（譯者注：也就是從右往左）。

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

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

1. Webpack嘗試解析  style.css  文件

2. 文件名與正則表達(dá)式 /\.css$/ 匹配

3. 文件被  css-loader  編譯

4. css-loader  處理后的結(jié)果會被傳到  style-loader

5. 最后， style-loader  返回一串JavaScript代碼

默認(rèn)情況下，打包后的輸出是 ./dist/bundle.js ?，F(xiàn)在，這個文件包含的代碼會把所有的樣式插入到            

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']
      }
    ]
  },
}

就是這樣，現(xiàn)在你可以引入scss文件了！文件在被  css-loader  解析之前，會從scss轉(zhuǎn)譯成純css。

（譯者注: 如果安裝完sass-loader后，本地運(yùn)行Webpack出現(xiàn)了和node-sass相關(guān)的錯誤，可嘗試再安裝一個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  屬性。現(xiàn)在它是一個對象，包含兩個屬性: loader （即loader的名字），和  options 。

url-loader 會把你的圖片轉(zhuǎn)換為base64格式的URI。如果你的圖片文件很小，那么把它們直接引入到代碼中會有更好的性能。這可以減少瀏覽器所發(fā)的請求數(shù)。但是，如果你的圖片文件很大，那么把它們作為單獨(dú)的文件引入可能會更好，因為瀏覽器可以并行加載它們。

這就是為什么  url-loader  有一個  limit  屬性。它指明了一個文件大小（以byte為單位），當(dāng)超過這個大小時，文件將不會被轉(zhuǎn)為base64的URI。相比較而言， file-loader  僅僅是被用來拷貝你的文件。

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

上面的配置會得到下面的結(jié)果：

body {
  background-image: url(ca3ebe0891c7823ff1e137d8eb5b4609.png); }
.icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAALElEQVR4AWMYIWAU1FPLoP9AXEFI0QEi8H+YYdQyqIEaXuumRhh2DZdUMwoATlYWfwh9eYkAAAAASUVORK5CYII=); }

因為 big-background.png 比限制的大小更大，它被拷貝至 dist 文件夾，并被起了一個隨機(jī)的名字。而相反， icon.png文件被轉(zhuǎn)換為了base64 URI。

使用babel轉(zhuǎn)譯JavaScript

另一個流行的loader是  babel-loader 。它允許你使用 Babel 轉(zhuǎn)譯JavaScript文件。它解決了如何使用最新版本的JavaScript來編寫代碼的問題。如果你想支持老版本的瀏覽器，或者想使用現(xiàn)代瀏覽器還沒有實現(xiàn)的功能，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  屬性，它也是一個 正則表達(dá)式 。如果任何文件與這個表達(dá)式相匹配，它將不會被轉(zhuǎn)譯。

這里有很多預(yù)置項可以滿足你的需求。查閱 Babel的官方文檔 ，你可以在那里找到它們的列表。

總結(jié)

這一次我們學(xué)習(xí)了Webpack很有用的一個功能：loader。我們介紹了一些可用的loader。利用它們，我們在項目中添加上了對scss的支持。此外，我們還學(xué)習(xí)如何使用  url-loader  處理圖片。另外一個loader的常用之處是我們討論的利用Babel轉(zhuǎn)譯JavaScript。在教程未來的部分，我們會深入到loader中，包括寫一個我們自己的loader。

關(guān)于葡萄城：

賦能開發(fā)者！葡萄城公司成立于 1980 年，是全球領(lǐng)先的集開發(fā)工具、商業(yè)智能解決方案、管理系統(tǒng)設(shè)計工具于一身的軟件和服務(wù)提供商。西安葡萄城是其在中國的分支機(jī)構(gòu)，面向全球市場提供軟件研發(fā)服務(wù)，并為中國企業(yè)的信息化提供國際先進(jìn)的開發(fā)工具、軟件和研發(fā)咨詢服務(wù)。葡萄城的控件和軟件產(chǎn)品在國內(nèi)外屢獲殊榮，在全球被數(shù)十萬家企業(yè)、學(xué)校和政府機(jī)構(gòu)廣泛應(yīng)用。