webpack 整個核心就是注人的概念

在 webpack 官方入口處左方就是第三方的預處理工具，將這些來源檔引入到 webpack 中後，第打包處理成瀏覽成為相關可處理的 css 或是 .js 檔之類的程式與檔案。

從零開炲建構 webpack

npm init-初始化專案建立 package.json

開啟終端機將路徑指向移動到專案資料中，輸入指令 npm init 後會出現一些提問的設定項目，不要輸入內容直接點按 Enter 鍵一路到底。
相關提問項目設定完後，就會在專案資料夾下出現一支 package.json 檔案，此檔案是專案資料夾中的套件版本控管。

安裝 npm 套件 webpack 與 webpack-cli

安裝指令如下，

  • npm install 後方接著套件名稱，而套件名稱間透過空隔字元可在接續另外的套件名，這樣的方式可用一個指令安裝多個套件，輸入指令後來安裝 webpack 與 webpack-cli。
  • --save-dev 透過 npm 安裝套件時，用來區分開發用或非開發用套件，在後方的 -dev 指的就是開發用的意思。

PS. 2021.03.28 使用此安裝指令會回應下面內容：

主要是在線上 webpack 的現行版本，需要使用最新版的 node v15.1.0 與 npm 7.0.8，透過 nvm 指令切換到最新版的 node.js node v15.1.0 版本後，就可順透下載套件。

輸入下找 webpack 與 webpack-cli 指令後，接著就會在專案資料夾中會再多出現 node_modules 資料夾與 package-lock.json 檔二個部份。

node_modules 資料夾，webpack 所用到的相關插件與賴件

node_modules 資料夾中會很有多的資料夾與檔案，裡面主要都是 webpack 所用到的相關插件與賴件。
透過 npm 下載下來的套件跟工具都會放在這個資料夾裡面，剛剛我們下載下來的 webpack 還有跟 webpack 有關係的套件都會在這資料夾裡面。

加入 git 版控時，排除 node_modules 設定，裡面過多的細節與資料很大很多，此資料夾排除後可透過指令在重新與伺服器下載相關檔案與套件。

package-lock.json，相關的相依性與設定

是 npm5 版本新增的，是專門紀錄 package.json 裡面更細節的內容，例如安裝的套件的詳細版本，或是確認你的 dependency (依賴) 是被哪個函式庫所要求的等等。
用來記錄 npm 安裝系節，相關的相依性與設定都會記錄在 package-lock.json 之中，對於此檔也有一定的重要記也需要特別留著。

package.json 下完指令後變更說明

關於這整包專案所有的資訊，包含我們安裝的套件版本，專案版本，npm指令都可以在這個 json 檔案裡面找得到，之後要搬移專案重新安裝套件也需要靠這個 json 檔案。
在下完 npm 安裝套件燈令後，會多了下面的內容在檔案中，這部份主要放置 webpack 與 webpack-cli 版本別。

在此的 package.json 主要記錄的相關的套件版別，像是 jQuery、vue.js、React.js 等等，都會記錄下來。

新增一個 webpack.config.js 檔案

在專案資料夾根目錄中新增 webpack.config.js 檔案，並將相關的設定內容加入檔案中。

在 {} 物件中，主要是 webpack 的起手勢。

webpack 注入點：entry: ‘./index.js’ 與加入 index.js 檔

entry: './index.js', 指的是注入點，將相關的第三方套件與內容透過 webpack 將注入點包裝後，就可是為瀏覽器所可讀取與使用的 .js, .css, .jpg 等等的格式。

接著在專案資料夾下的根目錄加入 index.js 檔，此檔就是 webpac 所打包使用的注入點。

webpack 輸出檔：output: { filename: ‘index-bundle.js’ }

將打包後的檔案指定輸出的路徑檔名 index-bundle.js，另外也有人命名為 index-min.js 等等的，概念都是一樣可自行設定。

module.exports = {}

開發網站時 webpack 裡都是透過模組化的方式來處理，包含 webpack.config.js 檔也需要以模組化來處理。
module.exports = {} 主要是將此模組傳出，而會是以 {} 物件的資料格式，裡面所帶著是相關設定的內容，傳出去對應給 webpack 接收來讀取裡面設定檔的內容。

package.json 裡加入 webpack 運行指令

修改 package.json 的 npm “scripts” 指令，加入 webpack 運行設定

在原本的 package.json 檔中，會發現以下內容，將 test 行刪除另外設定。

所修改的部份是加入 "start": "webpack"。

在 "scripts": {} 中用來設定自定 npm 的執行語法與指令設定。

在早期直接在專案資料夾下的終端機輸入 webpack 就可直接執行，在新版的 webpack 一定要以透過 "scripts": {} 設定 npm 指令的方式來執行 webpack。

執行 npm run start 運行 webpack，由 index.js 注入檔打包編譯輸出檔至 dist/index-bundle.js

輸入執行指令 npm run start 開始執行 webpack，而 start 就是在 package.json 裡的 "scripts": {} 所設定的部份。
輸入指令後，在會專案資料夾根目錄處，多出現一個 dist 的資料夾，展開後裡面就會出現 output: { filename: 'index-bundle.js', } 對應的 index-bundle.js 檔案。

開啟 dist/index-bundle.js 檔，裡面會是只有單行的程式碼，主要是透過 webpack 處理成壓縮單行的程式處理，在 webpack 注入檔 index.js 中都沒撰寫程式碼下，會在透過 webpack 處理自動加入額外打包與相關處理，也同時處理壓縮單行程式碼的動作。

使用 "webpack": "^5.28.0" 與 "webpack-cli": "^4.6.0" 版本，在輸入指令後的 'index-bundle.js' 檔，是直接空白沒內容。

目前的 'index-bundle.js' 單行壓縮的 webpack 輸出檔裡，是沒有 index.js 中的相關程式碼內容在裡面 (還沒有 console.log('HelloWord'))。

接著在 webpack 注入檔 index.js 中多加入 console.log('HelloWord')，

在壓縮單行的 webpack 打包輸出檔中，就可見到多加入的 console.log('HelloWord')

使用 "webpack": "^5.28.0" 與 "webpack-cli": "^4.6.0" 版本，輸入指令後的 'index-bundle.js' 是直接出現 console.log('HelloWord')，沒有其他 webpack 壓縮單行的懷式碼。

如果要執行指令 npm run start 時以開發環境運行，在 package.json 檔中的 "start": "webpack --mode=development" 多加入 --mode=development 就可打包輸出開發模式，上面的提示就不會在出現。