Webpack 4 教程 - 2 . 使用加載器來處理scss，image文件及轉譯js

時間 2019-12-06

標籤 webpack 教程使用加載處理 scss image 文件轉譯欄目 JavaScript 简体版

原文原文鏈接

今天咱們繼續webpack 4教程。在瞭解了webpack的基本概念以後，咱們進一步深刻。這一次咱們將觸及webpack裏強大的加載器（loaders）。咱們首先學習如何使用現有可用的加載器。包括處理css、scss、image文件及把新版（es6）javascript編寫的代碼轉譯成（瀏覽器支持的）老版（es5）代碼，Let's go！javascript

Webpack教程之續篇 - 什麼是加載器？

在上一篇教程中，我說過webpack是一個模塊打包器（module bundler）。但這不是它惟一的目標，儘管webpack自己固有隻能理解javascript文件，但能夠經過使用加載器來改變此限制。除此以外，對於許多類型的文件來講，加載器在處理過程當中還能夠對其進行修改。css

添加加載器

使用加載器最好的方式是在webpack.config.js文件中指定它們。這麼弄的話，須要在webpack.config.js中添加一個module.rules屬性。html

css 加載器

css加載器用來處理導入的css文件java

咱們來考慮一下下面的配置node

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

rules

rules屬性是加載器的數組。實際上，依據規則中test屬性中的正則表達式來判斷文件類型，從而將相應的加載器應用到對應類型的文件上。webpack

學習更多關於正則表達式的知識, 請查讀個人正則表達式教程

use

規則的use屬性代表哪一種類型的文件使用哪一個加載器es6

加載器鏈

上面的代碼中，你能在javascript代碼中導入css文件（例如使用咱們上一教程中提到過的es6模塊）。
但實踐中這還不能讓css起做用。咱們還須要把這些代碼加載到瀏覽器中才行（譯註：就是將樣式自動插入到<style>標籤中）。此時，該style加載器（style-loader）出手了。web

npm install style-loader

但這意味着要用兩個加載器來處理css（類型的）文件。你能經過加載器鏈來作到這一點。正則表達式

// webpack.config.js

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

就如你看到的那樣，如今咱們給use屬性賦值了一個數組。很是重要的一點是加載器鏈是從右往左執行的（譯註：即首先css-loader處理，而後把處理後結果給到style-loader再去處理）npm

/* style.css */

body {
  background-color:black;
}

// index.js

import './style.css';

使用上面的配置將這樣工做：

Webpack找到style.css文件
這個文件名匹配到/.css$/ 正則表達式
css-loader處理這個文件
處理的結果傳給style-loader
最後，style-loader返回一段javascript代碼(譯註：這段代碼執行的結果就是把樣式插入到<style>標籤中）

默認輸出的打包文件是./dist/bundle.js。這個文件包含有（功能性）代碼將全部的樣式放到<style>標籤中。若是你在HTML中引入bundle.js,腳本運行後其輸出相似以下：

<!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-loader,以支持sass/scss。

npm install sass-loader

（譯註：還須要安裝node-sass這個包，即 npm install node-sass）

將其添加到加載器鏈中

// webpack.config.js

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

如此，如今你就能導入scss文件了！ scss文件在被css-loader解釋以前，先被sass-loader轉譯爲純css。

加載器的可選參數

實際上，加載器能夠接受可選的參數來配置。咱們用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
            }
          }
        ]
      }
    ]
  }
};

注意，若是你想給加載器傳遞可選項，use屬性再也不是（加載器名字）的字符串了。如今它要求是一個對象，其有兩個屬性：loader（表示加載器名）和options。

url-loader將把圖像轉爲base64 URIs。若是圖像很是小的話，（用base64）直接包含在代碼中將提升性能。由於這樣減小了瀏覽器請求的次數。若是圖像比較大的話，則把它放在單獨分離的文件中更好，這時瀏覽器可並行的加載它們。

這就是爲何url-loader有一個limit屬性。它肯定文件大小的上限（以字節爲單位），當文件尺寸超過這個上限後，就不把它們轉爲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

另外一個流行的加載器是babel-loader。它經過Babel來轉譯javascript文件。使用最新版的javascript來寫代碼，要讓其能運行在較老的瀏覽器上;或者你應用了一些新功能，就算現代瀏覽器也還沒實現支持這些功能的話，你可能就須要用babel-loader來解決你的麻煩了。

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

譯註：按照npm官方包命名的新政，babel-core更名爲@babel/core, babel-preset-env改成@babel/preset-env，所以咱們應該這樣安裝：

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

// webpack.config.js

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

注意，咱們在這裏使用了exclude屬性，它也是一個正則表達式。若是文件的路徑匹配上了這個正則的話，這個文件就不會被轉譯。

babel官方發佈了許多presets來知足你的須要。請查閱babel的官方文檔（譯註：基本上，你就使用@babel/preset-env就行了，不用考慮其它的，有些已過期了）。你也能夠去這裏體驗一下在線轉換。

小結

這一回咱們學習了webpack中很是有用的功能：加載器。咱們接觸到了一些現有成熟的加載器。經過使用它們，咱們使得項目能支持scss了。除此以外，咱們還學習了使用url-loader來處理圖像。咱們還討論了另一個很廣泛的用法，即經過使用Babel來轉譯javascript。後面的教程中，咱們還將深挖加載器，包括本身寫一個。