更新時(shí)間:2021年12月02日11時(shí)06分 來源:傳智教育 瀏覽次數(shù):
webpack是一個(gè)模塊打包工具,可以把前端項(xiàng)目中的js、cs、scss/less、圖片等文件都打包在一起,實(shí)現(xiàn)自動(dòng)化構(gòu)建,給前端開發(fā)人員帶來了極大的便利。
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)集成了腳手架工具。
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之后,我們通過一個(gè)例子展示webpack的簡單使用。
(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)在瀏覽器中打開example.html,運(yùn)行結(jié)果如圖所示。
從圖中可以看出,控制臺(tái)輸出的打印結(jié)果為3,說明此時(shí)已經(jīng)將example.js文件打包為app.js文件。
猜你喜歡:
北京校區(qū)