站長資訊網(wǎng)
webpack是基于node.js的。webpack是一個用于現(xiàn)代JavaScript應用程序的靜態(tài)模塊打包工具，是基于node.js開發(fā)的，使用時需要有node.js組件支持；需要使用npm或者cnpm進行安裝，語法“cnpm install webpack -g”。
本教程操作環(huán)境：windows7系統(tǒng)、nodejs16版，DELL G3電腦。
webpack 是代碼編譯工具，有入口、出口、loader 和插件。webpack 是一個用于現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包工具。它將根據(jù)模塊的依賴關系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源。
當 webpack 處理應用程序時，它會在內(nèi)部構建一個依賴圖(dependency graph)，此依賴圖對應映射到項目所需的每個模塊，并生成一個或多個 bundle。
webpack是一個前端打包工具，基于node.js開發(fā)的，使用時需要有node.js組件支持。
安裝 Webpack
① Webpack的運行需要依賴Node.js，因此需要先安裝Node.js。
安裝完成之后在命令行窗口輸入下面兩行命令，若有出現(xiàn)版本號則安裝成功。
$ 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
創(chuàng)建項目
接下來我們創(chuàng)建一個目錄 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
執(zhí)行以上命令會編譯 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，輸出結果如下：
