webpack4 圖片載入

• 2020 年 4 月 29 日
• 筆記
• webpack

圖片處理（file-loader）

引用時出現的問題

在js中引入圖片並添加到頁面

let img = new Image();
img.src = './logo.png'
document.body.appendChild(img)

執行npm run dev

查看之後發現這個圖片載入不出來，也就是說圖片並沒有被打包出來，此處的路徑找不到圖片

所以我們需要將圖片以資源的形式引入進來

import logo from './logo'	//此時logo為一個文件名
let img = new Image();
img.src = logo
document.body.appendChild(img)

注意：若使用require方式引入時引入的是一個對象，需要不同的處理方式（有興趣的朋友可以自己列印出來看下）

let logo = require ('./logo')	//此時logo為一個文件名
let img = new Image();
img.src = logo.default	//此處有變動
document.body.appendChild(img)

此時執行npm run dev發現由於缺少一個loader報錯

解決問題

此處我們需要的是一個file-loader

npm i file-loader -D

在web.config.js中匹配對應的規則

{
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                  },
                ],
              }

在此執行npm run devok 執行完成