Introduction to Webpack 5
Tags: javascript, review, webpack, beginners
Published: 2022-03-03 01:23:06

---
title: Introduction to Webpack 5
tags: javascript, review, webpack, beginners
series: Webpack 5 Up and Running Review
author: Corey Lai
---

Webpack 是一個帶有豐富多樣功能的前端網站包裝工具，將我們網站的各項資產 HTML, CSS, images, JS 進行包裝/壓縮/相容性排除/效能提昇等工作，這次就讓我們透過<mark>  Webpack 5 Up and Running </mark>這本書一一剖析<mark> Webpack </mark>的各種強大功能吧！

![webpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1zulqy1w056mij3kywv.png)


## 1. Without Webpack or Other Module Bundler Library ##
首先先來測試看看，我們在沒有 Webpack 的情境下，應該如何進行作業。

**Let's Do This Now**  :fire:

1. 專案初始化
```bash
# 初始化專案
mkdir 01-sample-app && cd 01-sample-app
npm init -y
```
自動產生 package.json
```json
{
  "name": "01-sample-app",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```
2. 撰寫 JS Component

**Dir: src/index.js**

```javascript
function component() {
  let element = document.createElement('div');
  // _ 使用 lodash 第三方 Lib
  element.innerHTML = _.join(['Testing', 'without', 'webpack'], ' ');
  return element;
}

document.body.appendChild(component());
```

3. 撰寫 HTML 

**Dir: index.html**

```html
<!doctype html>
<html>
  <head>
    <title>Webpack - Test</title>
    <!-- 引用 lodash Lib -->
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <!-- 載入 index Component -->
    <script src="./src/index.js"></script>
  </body>
</html>
```

4. 結果預覽
![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urils9hcu76rzsmwwfp7.png)

完成我們的第一步驟! 實做如何在沒有 Webpack 的狀況下完成我們的網站 ！

## 2. With Webpack 
1. 專案初始化
```bash
# 初始化專案
mkdir 01-sample-app && cd 01-sample-app
npm init -y
# 安裝 webpack lib
npm install webpack webpack-cli --save-dev
# 安裝 lodash lib
npm install lodash
```
自動產生 package.json 看到多增加了 webpack / lodash :rainbow: 
```json
{
  "name": "01-sample-app2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}
```
2. 撰寫 JS Component

**Dir: src/index.js**

```javascript
// 透過 webpack 的封裝我們可以直接使用 import 來引用我們所需要的 lib
import _ from 'lodash';
function component() {
  let element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'Webpack'], ' ');
  return element;
}

document.body.appendChild(component());
```

3. 撰寫 HTML 

**Dir: dist/index.html**

不需要在引用我們的lib webpack 會自動幫我們進行包裝

> \<meta charset="utf-8"/\> :arrow_left: 缺少這句在 Webpack5 production mode 狀況下會發生錯誤

```html
<!doctype html>
<html>
  <head>
    <!-- webpack mode=production -->
    <meta charset="utf-8"/>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>
```
4. 使用 Webpack 進行編譯
```bash
npx webpack mode=development
```

5. 開啟 index.html 預覽結果

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kinvlpdkc2itb8az1rj5.png)

好了我們的第一章節 Introduction to Webpack 5 結束 :tada:
後面的章節會再介紹有關 Webpack 的強大功能！敬請期待！