Thumb 0427

新手向 Webpack 完全攻略 (7) – 編譯圖片?略懂略懂

by Roy Huang 2017-08-08 02:21 UTC

在這篇文章當中我們將進入另一個 Webpack 的用法,也就是圖片的編譯。當我們使用 lorempixel 來插入圖片的時候,感覺圖片的讀取有點慢吧?而有時候我們也會想讀取一些本機端的圖片,而 Webpack 的 Loader 也有解析圖片的功能。

在開始進入 Loader 的安裝以及設定之前,我們可以先從下面的 lorempixel 下載幾張圖片當成等等的材料 ,或是你可以選擇任何你喜歡的圖片。

200x200 圖片 1200x1200 圖片

並且我們在專案的根目錄開啟一個新的資料夾 asset,並且把圖片都放進去。

我們會需要使用兩個 Loader,分別是 image-webpack-loader 以及 url-loader

輸入 npm install -D image-webpack-loader url-loader 來安裝 Loader.

image-webpack-loader 的用途非常簡單,它讓 Webpack 可以編譯各種圖片檔案,同時也會壓縮圖片的大小。而 url-loader 則是可以判斷圖片的檔案大小。如果檔案太大,它會將圖片保持在我們輸出檔案的資料夾裡;反之若圖片的檔案小於我們設定的大小, url-loader 會它編譯為 Base64 的字串並直接插入我們的 JavaScritp 裡面。

順利安裝了兩個 Loader 之後,我們先來把插入的圖片改成本地端的圖片。

// image_view.js

import small from '../assets/small.jpg';
import large from '../assets/large.jpg';

const imageViewer = () => {
  let smallImage = document.createElement('img');
  smallImage.src = small;
  document.body.appendChild(smallImage);

  let largeImage = document.createElement('img');
  largeImage.src = large;
  document.body.appendChild(largeImage);
}

export default imageViewer;

如果你試著在這個時候執行 npm run build,它應該會顯示一個訊息告訴你:Webpack 不認識這個檔案格式,請安裝正確的 Loader 來解析。因此我們便需要到 webpack.config.js 來設定我們剛剛安裝的 Loader.

// webpack.config.js

  module:  {
    rules: [
    // .. other loaders setting above
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: { limit: 40000 }
          },
          'image-webpack-loader'
        ]
      }
    ]
  }

首先,我們要先告訴 Webpack 這些 Loader 要負責解析哪些檔案。這次的表達式比較複雜一些,因為我們預期圖片可能不會只有一種副檔名,所以我們這邊的表達式會指定所有副檔名為 jpg, jpeg, png, gif, svg 的檔案。(正規表達式 Regular Expression 是個複雜的題目,因此本篇文章不會特別介紹)

而以往我們的 use property 只是單純的一個含有字串的陣列,但這裡有所不同,我們把第一個字串變成了物件,因為我們想要添加別的設定值。這裡的 options: { limit: 40000 } 告訴這個 Loader,如果檔案小於 40KB,將檔案編成字串並插入 JavaScript,否則就以圖片檔案來輸出。

在這裡別忘了,Loader 的解析順序遵從後進先出的規則,所以我們應該把 image-webpack-loader 放在後面讓他先解析,再使用 url-loader

當讀者執行 npm run install 的時候,可能會遇到一個錯誤顯示 Module build failed: TypeError: Cannot read property ‘bypassOnDebug of null`,這是 webpack-image-loader 的已知 Bug,我們可以添加 options 來解決個這個問題。

因此我們會將這個 Loader 的設定改成:

 {
   loader: 'image-webpack-loader',
   options: { byPassOnDebug: true }
 }

當你完成修改之後,可能還會有另一個問題,Webpack 會告訴你 Module build failed: Error: Cannot find module 'file-loader',我認為這是 url-loader 的一個問題,他的 Dependancy 沒有順利地被安裝,因此你可以執行 npm install -D file-loader 來安裝這個 Package。

當你順利執行 npm run build 而且沒有出現任何錯誤訊息的時候,就代表你的設定完成了。但,且慢,為什麼你的頁面卻是空白一片?打開 Console 之後,我們會發現一行錯誤訊息告訴我們瀏覽器找不到我們的圖片。

然而是這樣的,被 Webpack 解析過後,它會預設圖片是放在專案的根目錄,但實際上不然,我們輸出的位置應該是在 build/ 裡面。因此,我們必須在 Webpack 的 output property 裡面指定查找圖片的路徑。

// webpack.config.js
  output: {
    filename: 'bundle.js',
    path: Path.resolve(__dirname, 'build'),
    // 新增 publicPath 這個 Property
    publicPath: 'build/'
  }

接著當我們重新執行 npm run build 之後,就可以看到頁面上的圖片了。

點選查看此章原始碼

此分享轉載自五倍 Rails 工程師 Roy Huang 的開發筆記

«回文章列表