webpack是什么？有什么用？怎么用？

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

Webpack安裝教程

在安裝webpack前，電腦需要先安裝node.js，詳細參考《node.js環(huán)境安裝教程》。

在Windows+R鍵，輸入cmd，在命令行中執(zhí)行如下命令即可安裝webpack：

npm install webpack -g

-g是全局安裝

啟動命令行


輸入webpack安裝命令


等待webapck安裝

小提示：舊版本的webpack還需要安裝webpack cli腳手架工具，而最新版本的webpack打包工具已經(jīng)集成了腳手架工具。

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) 創(chuàng)建C:\vue\chapter01\demo01目錄，作為項目目錄。

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

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

上述代碼用于計算兩個數(shù)之和，在控制臺中輸出計算結果。

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

webpack ./example.js -o app.js

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

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

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

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

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

猜你喜歡：

webpack打包體積優(yōu)化方法有哪些？

Github官網(wǎng)git手冊

GitHub官網(wǎng):如何設置git

GitHub官網(wǎng):如何創(chuàng)建回購

傳智教育web前端開發(fā)高手班