webpack

參考文章

Logowebpackwebpack
Logo1. Webpack 初學者教學課程 Part1 · Webpack Tutorial 繁體中文

webpack

Webpack 簡稱為模組整合工具。如果你想要深入的話，可以拜訪 JavaScript Modules: A Beginner’s Guide 和 JavaScript Modules Part 2: Module Bundling 這兩篇優秀的解釋文章：

我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。 這個檔案會是 tree 的 root。然後你每次 require 一個檔案從其他檔案並把它加入到 tree。當你執行 webpack，所有的檔案和 module 都會被 bundle 成一個檔案。

專案結構

一般我們的專案會有兩個很重要的資料夾src與dist，這兩個資料夾是什麼？

  • src : 專門放我們Preprocess的檔案，包括es6、pug、sass、vue、jsx等檔案，這個資料夾不會丟上去server部署。

  • dist : 經過webpack編譯打包後，產生出瀏覽器看得懂的html、css、js，要部署也是這個資料夾去部署。

會看到src的資料夾裡面有許多資料夾，這個是我自己的分類方式，每個人的都多少會不一樣，僅供參考啦～

像這樣的開發方式就像是現代前端的開發方式，我們就可以專心的用去多好用的Preprocess，不用去管最後的編譯成果！

開始使用

創建package.json

接下來我們要來用npm來創建一個package.json輸入

npm init -y

終端機下面依序輸入以下指令來安裝webpack (這邊我們透過nodejs的套件管理工具npm來進行安裝，安裝好nodejs後及安裝好npm，所以可以直接使用npm指令來安裝webpack)

安裝npm 套件

可以輸入以下兩種

1.

npm install webpack webpack-cli --save-dev

2.

npm install webpack --save-dev

他會幫你的資料夾下面創立一個package.json，所以現在你的專案資料夾裡面應該會有一個資料夾跟兩個json檔案

  • node_modules ：就是我們透過npm下載下來的套件跟工具都會放在這個資料夾裡面，剛剛我們下載下來的webpack還有跟webpack有關係的套件都會在這資料夾裡面

  • package.json：關於這整包專案所有的資訊，包含我們安裝的套件版本，專案版本，npm指令都可以在這個json檔案裡面找得到，之後要搬移專案重新安裝套件也需要靠這個json檔案

創建src

創建一個src 資料夾底下index.js 任意輸入內容

const profile = {
  name: 'John',
  desc: 'First Webpack',
};

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

將 package.json 打開後，修改方式如下:

主要修改scripts 位置，改為build:"webpack"即可。

{
  "name": "Webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.52.1"
  },
  "devDependencies": {
    "webpack-cli": "^4.8.0"
  }
}

編譯js 檔案

npm run build

按下去後就會進行js編譯，到這邊恭喜你就成功的打包了你第一個 js 檔案，所以透過webpack的轉換我們可以寫許多各式各樣的Preprocess來輔助我們開發網頁，當然webpack.config.js的設定還不只那一點點，還有更多強大的功能跟使用方式，不過那就留到之後再說吧，目前想讓入門的人有個基礎觀念，跟能稍微簡單地用一下～

PreviousSVG - 可縮放向量圖形NextReact

Last updated

Was this helpful?