教育行業A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

webpack是什么?有什么用?怎么用?

更新時間:2021年12月02日11時06分 來源:傳智教育 瀏覽次數:

webpack是一個模塊打包工具,可以把前端項目中的js、cs、scss/less、圖片等文件都打包在一起,實現自動化構建,給前端開發人員帶來了極大的便利。

webpack


Webpack安裝教程

在安裝webpack前,電腦需要先安裝node.js,詳細參考《node.js環境安裝教程》

在Windows+R鍵,輸入cmd,在命令行中執行如下命令即可安裝webpack:

npm install webpack -g

-g是全局安裝

啟動命令行
啟動命令行

輸入webpack安裝命令
輸入webpack安裝命令

開始安裝webapck
等待webapck安裝

webpack安裝完成

安裝完成后,執行"webpack-v" 命令,查看webpack版本,如下所示:

安裝檢測

小提示:舊版本的webpack還需要安裝webpack cli腳手架工具,而最新版本的webpack打包工具已經集成了腳手架工具。



webpack常用安裝命令

1. 安裝webpack

npm install webpack -g

2. 卸載版本:

npm uninstall webpack -g
npm uninstall -g webpack-dev-server

3. 設置代理:

npm config set registry "http://registry.npmjs.org/"

4. 清除代理設置:

npm config set proxy null
npm config set https-proxy null

5.查看代理:

npm config get proxy
npm config get https-proxy

webpack簡單使用

在安裝webpack之后,我們通過一個例子展示webpack的簡單使用。

(1) 創建C:\vue\chapter01\demo01目錄,作為項目目錄。


(2) 在demo01目錄中創建example.js文件,具體代碼如下:

function add(a, b){
	return a + b
}
console .log(add(1,2))

上述代碼用于計算兩個數之和,在控制臺中輸出計算結果。


(3)在demo01目錄下執行如下命令,進行打包操作:

webpack ./example.js -o app.js

webpack打包


執行上述命令后,就會編譯example.js文件,將編譯后的結果保存為app.js文件。


(4)創建example.html文件,引人編譯后的app.js文件,具體代碼如下:

<script src="app.js"></script>


(5)在瀏覽器中打開example.html,運行結果如圖所示。

webpack打包案例

從圖中可以看出,控制臺輸出的打印結果為3,說明此時已經將example.js文件打包為app.js文件。



猜你喜歡:

webpack打包體積優化方法有哪些?

Github官網git手冊

GitHub官網:如何設置git

GitHub官網:如何創建回購

傳智教育web前端開發高手班

0 分享到:
红豆直播app黄台_红豆直播app下载免费_红豆直播app下载