DEV Community

HyperRedStart
HyperRedStart

Posted on • Updated on

Introduction to Webpack 5

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

webpack

1. Without Webpack or Other Module Bundler Library

首先先來測試看看,我們在沒有 Webpack 的情境下,應該如何進行作業。

Let's Do This Now 🔥

  1. 專案初始化
# 初始化專案
mkdir 01-sample-app && cd 01-sample-app
npm init -y
Enter fullscreen mode Exit fullscreen mode

自動產生 package.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"
}
Enter fullscreen mode Exit fullscreen mode
  1. 撰寫 JS Component

Dir: src/index.js

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

document.body.appendChild(component());
Enter fullscreen mode Exit fullscreen mode
  1. 撰寫 HTML

Dir: index.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>
Enter fullscreen mode Exit fullscreen mode
  1. 結果預覽 Preview

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

2. With Webpack

  1. 專案初始化
# 初始化專案
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
Enter fullscreen mode Exit fullscreen mode

自動產生 package.json 看到多增加了 webpack / lodash 🌈

{
  "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"
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. 撰寫 JS Component

Dir: src/index.js

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

document.body.appendChild(component());
Enter fullscreen mode Exit fullscreen mode
  1. 撰寫 HTML

Dir: dist/index.html

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

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

<!doctype html>
<html>
  <head>
    <!-- webpack mode=production -->
    <meta charset="utf-8"/>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  1. 使用 Webpack 進行編譯
npx webpack mode=development
Enter fullscreen mode Exit fullscreen mode
  1. 開啟 index.html 預覽結果

Preview

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

Top comments (0)