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

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

Webpack安裝教程

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

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

npm install webpack -g

-g是全局安裝

啟動(dòng)命令行


輸入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. 設(shè)置代理：

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

4. 清除代理設(shè)置：

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

5.查看代理：

npm config get proxy
npm config get https-proxy

webpack簡(jiǎn)單使用

在安裝webpack之后，我們通過(guò)一個(gè)例子展示webpack的簡(jiǎn)單使用。

(1) 創(chuàng)建C:\vue\chapter01\demo01目錄，作為項(xiàng)目目錄。

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

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

上述代碼用于計(jì)算兩個(gè)數(shù)之和，在控制臺(tái)中輸出計(jì)算結(jié)果。

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

webpack ./example.js -o app.js

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

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

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

(5)在瀏覽器中打開(kāi)example.html，運(yùn)行結(jié)果如圖所示。

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

猜你喜歡：

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

Github官網(wǎng)git手冊(cè)

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

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

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