Webpack4教程 - 第二部分，使用loader處理scss,圖片以及轉換JS

時間 2019-11-11

標籤 webpack4 webpack 教程第二部分使用 loader 處理 scss 圖片以及轉換欄目 JavaScript 简体版

原文原文鏈接

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://wanago.io/2018/07/16/webpack-4-course-part-two-webpack-4-course-part-two-loaders/javascript

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

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

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

添加loader

使用loader最好的方式是在webpack.config.js文件中指定它們。要這麼作，你須要添加module.rules屬性。java

css-loader

css-loader可以翻譯引入的css文件。node

npm install css-loader

考慮以下的配置webpack

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

rules

rules 這個屬性是一個數組，指明你的各個loader。它會做用於匹配到 test 屬性所指定規則的每個文件。這個規則，實際上，是一個正則表達式。程序員

use

屬性 use 指明須要對匹配的文件應用那個loader。web

串聯多個loader

有了上面的代碼，你就可以在你的JavaScript代碼中導入css文件了。（例如，使用以前咱們提到的ES6模塊）正則表達式

但這還不能讓css真正生效。咱們須要一種方法讓瀏覽器可以使用這些css。這種狀況下，style-loader就派上用場了。npm

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。

——近期，恰逢葡萄城成立30週年，葡萄城聯合博客園誠邀你參與《2018程序員生存現狀調查》活動，參與即有機會贏取千元大獎，並和千萬程序猿（媛）共同交流、分享。
詳情瞭解：https://www.cnblogs.com/powertoolsteam/p/gc-30th-anniversary.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。