### **Webpack是什麼？**
簡單來說，Webpack是用來將前端應用程式中的多個模塊（例如：JavaScript、CSS、圖像等），自動化打包成單個或多個資源文件的工具。Webpack提供了一個強大的模塊化構建系統，使開發者能夠以模塊化的方式組織和管理前端代碼。

### **步驟**
1. 需先安裝 node.js、npm。

2. 創立資料夾，在根目錄執行指令 npm init -y。安裝完成後會出現以下檔案。

3. 手動建立兩個空白檔案：index.html、index.js。

4. 準備安裝 webpack，執行指令npm install webpack webpack-cli --save-dev。安裝完成後會出現以下兩個檔案。

5. 手動建立 webpack.config.js。

6. 進入 webpack.config.js，輸入以下程式碼。
* entry 代表是專案的進入點。
* output 代表產出打包的檔案，filename 檔名為 index.bundle.js，輸出在主路徑下。

  const path = require("path");
  module.exports = {
    mode: 'development',
    entry: "./index.js",
    output: {
      filename: "index.bundle.js",
      path: path.resolve(__dirname, "./"),
    },
  };

7. 在package.json輸入自訂指令，"build": "webpack"。

8. 下載JavaScript 的套件 jQuery，執行指令 `npm install jquery`，執行完成後 node_module 裡面會出現 jquery 的檔案（node_module資料夾太多故未截圖）。

9. 在 index.js 中寫下引用 jquery 的語法。

  import $ from 'jquery'
  $('body').html('hello!')

10. 程式的部分準備好了，可以打包檔案。執行 npm run build，執行完成後會新增index.bundle.js。

11. 查看 index.bundle.js，裡面應有包含index.js的程式碼。

12. 在 index.html 引入 index.bundle.js。

13. 啟用index.html（可用VS Code live-server查看），順利出現字樣即安裝成功！

#### 參考文章
* [[DAY11]Webpack自動化打包工具](https://ithelp.ithome.com.tw/articles/10243595)
* [關於 Webpack，它是什麼？能夠做什麼？為什麼？怎麼做？— freeCodeCamp 的筆記](https://askie.today/what-is-webpack/)
* [[note] Webpack 學習筆記](https://pjchender.dev/webpack/note-webpack/)