webpack是基於node.js的。 webpack是一個用於現代JavaScript應用程式的靜態模組打包工具，是基於node.js開發的，使用時需要有node.js元件支援；需要使用npm或cnpm進行安裝，語法「cnpm install webpack -g」。
本教學操作環境：windows7系統、nodejs16版，DELL G3電腦。
webpack 是程式碼編譯工具，有入口、出口、loader 和外掛程式。 webpack 是一個用於現代JavaScript 應用程式的靜態模組打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則產生對應的靜態資源。
當webpack 處理應用程式時，它會在內部建立一個依賴圖(dependency graph)，此依賴圖對應對應到專案所需的每個模組，並產生一個或多個bundle。
webpack是一個前端打包工具，基於node.js開發的，使用時需要有node.js元件支援。
安裝Webpack
① Webpack的運作需要依賴Node.js，因此需要先安裝Node.js。
安裝完成之後在命令列視窗輸入下面兩行命令，若有出現版本號則安裝成功。
$ node -v$ npm -v
② 接著就可以透過npm（一個基於Node.js的套件管理工具）來安裝Webpack咯
因為npm的來源在國外，所以安裝速度可能比較慢。建議大家可以用淘寶的npm來鏡像cnpm。但要注意的一點是，cnpm中有一些套件會不太一樣（一般來說不影響使用）
透過下面這行程式碼即可完成cnpm的配置
$ npm install -g cnpm --registry=https://registry .npm.taobao.org
使用cnpm 安裝webpack：
cnpm install webpack -g
建立專案
接下來我們建立一個目錄app：
mkdir app
在app 目錄下新增runoob1.js 文件，程式碼如下：
app/runoob1.js 檔案
document.write ("It works.");在app 目錄下新增index.html 文件，程式碼如下：
app/index.html 文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>接下來我們使用webpack 指令來打包：
webpack runoob1.js bundle.js
執行以上指令會編譯runoob1.js 檔案並產生bundle.js 文件，成功後輸出資訊如下所示：
Hash: a41c6217554e6666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./runoob1.js 29 bytes {0} [built]在瀏覽器中開啟index.html，輸出結果如下：
