webpack是基於node.js的嗎
- 青灯夜游原創
- 2022-07-12 18:57:202932瀏覽
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: a41c6217554e666594cb
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，輸出結果如下：
#更多node相關知識，請造訪：nodejs 教學！
以上是webpack是基於node.js的嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！