溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“webpack是不是基于node.js的”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
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，輸出結果如下：
“webpack是不是基于node.js的”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
