站長資訊網(wǎng)
webpack是基于node.js的。webpack是一個(gè)用于現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包工具，是基于node.js開發(fā)的，使用時(shí)需要有node.js組件支持；需要使用npm或者cnpm進(jìn)行安裝，語法“cnpm install webpack -g”。
本教程操作環(huán)境：windows7系統(tǒng)、nodejs16版，DELL G3電腦。
webpack 是代碼編譯工具，有入口、出口、loader 和插件。webpack 是一個(gè)用于現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。
當(dāng) webpack 處理應(yīng)用程序時(shí)，它會在內(nèi)部構(gòu)建一個(gè)依賴圖(dependency graph)，此依賴圖對應(yīng)映射到項(xiàng)目所需的每個(gè)模塊，并生成一個(gè)或多個(gè) bundle。
webpack是一個(gè)前端打包工具，基于node.js開發(fā)的，使用時(shí)需要有node.js組件支持。
安裝 Webpack
① Webpack的運(yùn)行需要依賴Node.js，因此需要先安裝Node.js。
安裝完成之后在命令行窗口輸入下面兩行命令，若有出現(xiàn)版本號則安裝成功。
$ node -v$ npm -v
② 接著就可以通過npm（一個(gè)基于Node.js的包管理工具）來安裝Webpack咯
因?yàn)閚pm的源在國外，所以安裝速度可能比較慢。建議大家可以用淘寶的npm鏡像cnpm。但是要注意的一點(diǎn)是，cnpm中有一些包會不太一樣（一般來說不影響使用）
通過下面這行代碼即可完成cnpm的配置
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
使用 cnpm 安裝 webpack：
cnpm install webpack -g
創(chuàng)建項(xiàng)目
接下來我們創(chuàng)建一個(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
執(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，輸出結(jié)果如下：
