iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
6
Modern Web

在 React 生態圈內打滾的一年 feat. TypeScript系列 第 2

Day01 | 別再放一堆 CDN ,把 Webpack 裝起來就對了

前言

先說説 CDN 是什麼吧,以 JQuery 為例,如果我們想在網頁上使用它,就得在 HTML 中使用 Script 將 JQuery 的程式碼載入:

<html>
  <body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  </body>
</html>

然後現今的前端常常這邊用一些輪播、那邊用一些燈箱,所以 CDN 就會長得到處都是:

<html>
  <body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- lightgallery.js v1.6.6 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery.min.js"></script>
  </body>
</html>

CDN 只要一多,HTML 就會顯得很雜亂,有時候更會搞不清楚哪些到底會用到,哪些不會?

而 Webpack 是個打包工具,能夠將專案中會用到的所有 JS 檔案打包起來,

除了處理 JS 外,

之後會提到的 SCSS,都能夠藉由它搭配 Babel 做包裝產出,

今天讓我們先學習如何使用 Webpack。


前置準備

  1. 需要先安裝 node 環境,如果環境還沒準備好,可以參考 這篇文章
  2. 一顆擁有學習熱忱的心。

使用方法

建立 npm 專案


開啟命令提示字元,先用 cd 指令將路徑指定到專案的資料夾後輸入:

npm init -y

輸入完後跟目錄底下會出現一個 package.json,裡面會描述專案資訊:

安裝 Webpack

建立專案後,便可繼續安裝 Webpack 及他的 cli 工具:

npm install webpack webpack-cli --save-dev

建立 Webpack 設定檔

直接在專案的根目錄新增一個檔案,檔名叫 webpack.config.js,內容如下:

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist/'),
  }
};
  1. entry 是進入點,Webpack 會從 ./src/index.js 開始編譯,並尋訪所有需要用到的 JS 或 Module 甚至是 CSS。
  2. output 是打包後的檔案產生位置,filename 為打包後的檔案名稱,path 指定路徑。

建立進入點 JS

上方的進入點指定為 src 路徑下的 index.js,因此先建立 src 資料夾及 index.js:

/* 當前專案架構 */
src
 |-index.js
package.json
webpack.config.js

開啟 index.js,並輸入一些 JavaScript:

const profile = {
  name: '神Q超人',
  position: 'Front End Development',
};

console.log(`Hi! My name is ${profile.name}`);
console.log(`position is ${profile.position}`);

進行打包

打開 package.json,並在其中的 script 中加入新指令:

{
  /* 其他省略 */
  "scripts": {
    "build": "webpack -p"
  },
  /* 其他省略 */
}

接著在命令提示字元中輸入指令:

npm run build

Webpack 便會開始打包,如果打包工作順利結束,目錄下會多一個 dist 資料夾,內部便是打包後的 JS,使用 node 執行結果也正常:

Import module

上方有提過,Webpack 會從進入點開始尋找專案需要的 JS 或 Module ,並打包為一個整理過的 JS,因此我們便不需要再用 CDN 管理哪些套件,並疑惑他們是否真的有使用到,刪除了會不會出錯,

因為 Webpack 會去判斷專案中有沒有需要他們,打包後就不會出現多餘的幽靈 Module

下方舉個例子來驗證這回事。

在 src 下另外建立一個 position 資料夾與其目錄下的 index.js,作為一個 Module:

/* 當前專案架構 */
src
 |-position
  |-index.js
 |-index.js
package.json
webpack.config.js

position/index.js 的內容為:

const position = 'Front End Development';

export default position;

在 src/index.js 中將 positon 的部分都先移除:

const profile = {
  name: '神Q超人',
};

console.log(`Hi! My name is ${profile.name}`);

進行打包後,可由結果觀察到,即使 position/index.js 在專案中,但 Webpack 卻略過,因為程式的執行並不需要他:

接下來修改一下 src/index.js:

import position from './position/index.js'

const profile = {
  name: '神Q超人',
};

console.log(`Hi! My name is ${profile.name}`);
console.log(`position is ${position}`);

加入 position/index.js 後,Webpack 便能夠從 src/index.js 內找到他,並判斷他是需要的,而加入打包檔案:

透過 Webpack 的打包,會讓專案的 index.html 變得更簡潔,也許今後就再也不會長這樣:

<html>
  <body>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- lightgallery.js v1.6.6 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery.min.js"></script>
    <!-- 等等可能一堆 -->
  </body>
</html>

而是集所有需要套件的 bundle.js

<html>
  <body>
    <script src="./bundle.js"></script>
  </body>
</html>

文章中的原始碼都會整理在 GitHub 上。


結尾

本文簡單描述了 Webpack 的建置,其實沒有想像中那麼難,起手門檻也不高,不需要一次就將它設置到定位,之後我們用漸進式的步調,慢慢將會用到的東西都加進來。

如果文章中有任何問題,再麻煩大家留言告訴我,謝謝!


上一篇
Day 00 | React With TypeScript - 旅途漫長,所以我們需要地圖
下一篇
Day02 | 整齊的程式,讓看的人長命百歲,給我用 ESLint
系列文
在 React 生態圈內打滾的一年 feat. TypeScript31
1
連城
iT邦新手 5 級 ‧ 2020-05-13 19:15:53

有件事情我很好奇 ` 這個符號要怎麼樣才按出來?

Robin iT邦新手 4 級 ‧ 2020-05-25 10:20:03 檢舉

在鍵盤的 1(ㄅ),左邊波浪符那顆就是囉

連城 iT邦新手 5 級 ‧ 2020-05-25 10:44:05 檢舉

太感謝你了

謝謝幫我回應,也和樓主說聲不好意思,沒有很常看這個平台 /images/emoticon/emoticon02.gif

0
zyxa9527
iT邦新手 5 級 ‧ 2020-12-11 18:45:50

之前在Vue專案內會import蠻多module的 導致整包太大網頁開啟速度一開始會很慢
但是爬文後有個建議方式是改用CDN並用映射的方式 想請問下 會變慢的話還是該選擇CDN的方式吧?

嗯嗯,主要是透過 npm 管理套件和 webpack 打包 JS,就不用在 HTML 上寫下一堆複雜的 script 來源,至於要如何載入可以依照專案的需求來處理!CDN 就是個很棒的方式!

0
matuyou0301
iT邦新手 5 級 ‧ 2021-04-11 23:54:26

"scripts": {
"build": "webpack -p"
}
是不是需要改成下方呢?
"scripts": {
"build": "webpack b"
}

因為在測試的時候跳出
[webpack-cli] Error: Unknown option '-p'
還是這兩者有差別呢?

想請問神Q大大我要怎麼在VSCode裡面執行webpack的指令,因為一直顯示
「'webpack' 不是內部或外部命令、可執行的程式或批次檔」的訊息。

剛才又嘗試了許多方法,重新刪除再安裝npm i webpack webpack-cli -g,但是發現還是無法解決無法在vscode執行的問題。後來又跑去查看環境變數,很奇妙的是可以在系統或本地的cmd下執行,但是不管怎麼修改就是無法在vscode執行,人生好難QQ,到底是哪裡出錯了。

用npm run build時可以執行,但是webpack本身不能執行,還是我搞錯了什麼。

Homura iT邦高手 1 級 ‧ 2021-04-21 14:14:27 檢舉

vs code預設終端應該power shell
所以你把vs code預設終端改成cmd應該就沒問題

我在想啦!有可能是 webpack 的版本更新了,要不要確認看看你裝的版本是多少?

後來發現是因為放置npm global裡面的資料夾位置有問題,重新整理Node and Npm後就沒問題了!

我要留言

立即登入留言