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' }
    }]
}
}
```
  - 注：這裡只強調 module，對其它的配置項不清楚請查閱官方文件的概念部分
- 我們已經安裝的 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等等，詳情請查文件

webpack 入門之 loader 案例

相關文章