webpack 入門之 loader 案例

webpack是前端開發中必備的知識，並不是很難，但是有點複雜，尤其是才接觸webpack這個打包工具時，本文用一個簡單的案例引入了webpack的一個核心概念：loader

文件：
- webpack
- webpack中文文件
可以將 webpack 看做是一個 模組打包機，它做的事情是：分析你的專案結構，找到 JavaScript模組以及其它的一些瀏覽器不能直接執行的擴充語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用
Webpack 的工作方式是：把你的專案當做一個整體，透過一個給定的主檔案（比如index.js），webpack 將從這個主檔案開始找到你的專案的所有依賴檔案
使用 loaders 處理它們，最後打包為一個（或多個）瀏覽器可識別的JavaScript檔案

首先你得先安裝好 Node.js（最好版本夠新），因為 webpack 是基於 Node.js 的一個開發工具，webpack 的很多新功能更是基於新的 Node.js 版本的
- Node.js 官網如下：Node.js
- 可以在終端輸入 node -v 以及 npm -v 來確定是否已經安裝正確
建立一個新的資料夾，我假設為webpack-demo
初始化：
- 開啟終端，輸入：
```
npm init -y
```
- 注：你將會建立一個 package.json 檔案，這是一個標準的 npm 說明檔案，如果需要自定義一些內容，你也可以使用 npm init 來指定
安裝 webpack：
- 在終端輸入：
```
npm install webpack webpack-cli -D
```
- 注：此處為區域性安裝，當然你也可以透過 npm install webpack webpack-cli-g 來全域性安裝，但是強烈推薦區域性安裝
  另外，此處是直接連同 webpack-cil 一起安裝的，網上也有安裝其他的方式，此處僅供參考
- 驗證 webpack 版本：
```
npx webpack -v
```
安裝步驟已經結束啦，現在你的資料夾目錄應該如下：
```
 |- node_modules
 |- package.json
 |- package-lock.json
```

現在我們的目標是：將一個圖片打包，並且在網頁上顯示出來
新建一個 src 資料夾，來存放我們的資原始檔
- 在 src 資料夾中新建檔案 index.js，此檔案將會作為我們之前提到過的 主檔案，webpack 頁將從這個主檔案開始找到這個專案的所有依賴檔案
- 在 src 資料夾中儲存 avatar.jpg 圖片，圖片如下：

新建一個 dist 資料夾，來作為即將容納我們的 html 檔案以及打包後的檔案：

在資料夾中新建 index.html，作為要訪問的網頁，並在檔案中輸入：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
  </head>
  <body>
      <div id="root"></div>
      <script src="./bundle.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

注：這個 bundle.js 即為我們打包好的檔案

指定主檔案：
- 我們在 src 中新建了 index.js，但是 webpack 預設是在根目錄下找 index.js，所以我們需要單獨設定
  開啟 package.json，將其中的 "main" 改為："main": "./src/index.js"

配置檔案 webpack.config.js

在根目錄下新建 webpack.config.js

在其中輸入：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
  },
  module: {
      rules: [{
          test: /\.jpg$/,
          use: {
              loader: 'file-loader',
              options: {
                  name: '[name].[ext]'
              },
              outputPath: 'images/',
          }
      }]
  }
}

注：這裡只強調 module 中的 loader，對其它的配置項不清楚請查閱官方文件的概念部分以及相關 file-loader 部分

我們已經安裝的 webpack 其實並不會知道如何打包圖片檔案，所以我們在這裡引入另一個工具：file-loader 來專門解決圖片檔案
關於該 loader 的連結如下：
- webpack file-loader
安裝 file-loader：
```
npm install --save-dev file-loader
```
入口與出口：
- 在 webpack.config.js 中，我們可以透過 entry 來指定打包的入口檔案
- 同樣，也可以透過 output 來指定我們的出口檔案

檔案已經配置好啦，現在我們現在終端輸入：
```
 npx webpack
```
結果如下：
開啟 index.html，就會看到圖片。

我們之前是用 npx webpack 來打包檔案，當然我們也可以自定義命令：
- 在 package.json 檔案中，指定 "scripts" 如下：
```
"scripts": {
  "bundle": "webpack"
}
```
- 這樣我們就可以輸入 npm run bundle，結果當時也相同
此處我們打包的是 .jpg 檔案，其實我們安裝了 file-loader 之後，我們也可以打包 .png、.gif等等，詳情請查文件

本作品採用《CC 協議》，轉載必須註明作者和本文連結

webpack 入門之 loader 案例

相關文章