Hello webpack! Loader

除了javascript之外, webpack也能幫我們管理scss, less, html…等等其他的程式碼, 這時要借助的工具就是loader。

引入圖片

先準備一張範例圖片, 放到src資料夾裡

這張圖片我不會直接放在html, 而是會由一支js來把它放到畫面上。

這支Js會叫做addImg, 它的目的就是產生一個img標籤, 這個img會貼出這張魚的圖片

目前的檔案結構:

addImg.js

1
2
3
4
5
6
7
8
9
10
11
12
13

import Fish from './fish.png';
function addImg() {
	//產生一個img標籤
  const img = document.createElement('img');
  img.alt = 'fish';
  img.width = 300;
  img.src = Fish;
  const body = document.querySelector('body');
	// 設定完img的屬性後就把它塞進body裡
  body.appendChild(img);
}

export default addImg;

在index.js中引入

indes.js

1
2
3
4

import addImg from './addImg.js';


addImg();

完成之後來打包！npm run build

跳錯了
這個錯誤訊息的意思是說：webpack無法解析這個檔案, 你需要一個合適的loader來處理它。

引入loader

有些檔案格式並不需要loader就能被webpack識別, 例如javascript或json, 但是遇到它無法識別的類型(例如圖片)時, 我們需要在config中為這些類型的檔案設定規則和相應的loader

webpack.config.js
新增module物件

1
2
3
4
5
6
7
8
9
10
11

//loaders
module: {
  rules: [
    {
      test: /\.(png|jpg)$/,
      use: [
        'file-loader'
      ]
    },
  ]
}

module是一個物件, 我們用rules來寫使用loader的規則, rules是一個物件組成的陣列, 裡面的物件接受兩個屬性: test和use。

test中的正規表達式, 意思是接收到有.png或.jpg類型的檔案時, 使用'file-loader'。運用這個正規表達式也可以套用在別種檔案類型上。

webpack在打包時, 若是遇到它無法解析的檔案, 就會在這個rules中尋找, 找到對應的規則時就應用。

webpack 之 loader 和 plugin 简介

loader並不是原生的, 而是要另外下載, 使用
npm install file-loader --save-dev

這時再跑npm run build就成功了

可是圖片卻沒有跑出來, 查看devtool, 顯示如下

<img alt="fish" width="300" src="027ea48430dfaf4e58e4131788a65bb2.png">

為什麼檔名會變亂碼?

file-loader會將這張圖片複製一份放到build完的dist底下, 檔名也會因為加密過後改變。

但是很顯然的, 產生出來的img標籤中的src路徑是錯誤的，路徑應該要是dist/img.png, 才能抓到圖片

解決路徑問題

我們要在config中新增publicPath屬性

webpack.config.js

1
2
3
4
5
6

output: {
  filename: "bundle.js",
  path: path.resolve(__dirname, './dist'),
// 位置
  publicPath: 'dist/',
},

圖片出現了, 來看一下剛才錯誤的路徑是否修正了
<img alt="fish" width="300" src="dist/027ea48430dfaf4e58e4131788a65bb2.png">
這次路徑中從dist開始找, 圖片也呈現, 表示路徑正確了

path vs publicPath ?

path是webpack打包後將程式碼輸出的目的地, 產生的網站根目錄, 也就是說, 這個網站下的所有打包完的程式碼, 資源, 都可以在這個根目錄找到, 可以說是網站的倉庫。

publicPath則是告訴webpack這個倉庫的位置, 告訴它這個資源要去哪裡找, 以目前的例子來說, 就是去dist這個資料夾裡面找。
Webpack path與publicPath的區別詳解