新手向 Webpack 完全攻略 (7) – 編譯圖片？略懂略懂
在這篇文章當中我們將進入另一個 Webpack 的用法，也就是圖片的編譯。當我們使用 lorempixel 來插入圖片的時候，感覺圖片的讀取有點慢吧？而有時候我們也會想讀取一些本機端的圖片，而 Webpack 的 Loader 也有解析圖片的功能。
在開始進入 Loader 的安裝以及設定之前，我們可以先從下面的 lorempixel 下載幾張圖片當成等等的材料 ，或是你可以選擇任何你喜歡的圖片。
並且我們在專案的根目錄開啟一個新的資料夾 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 的開發筆記