webpack快速入門——如何安裝webpack及注意事項

1.window+R鍵,輸入cmd打開命令行工具,輸入 mkdir XXXX(XX:文件夾名);html

2.cd XXX 進入剛剛建立好的文件夾裏,輸入cnpm install -g webpack (安裝了淘寶鏡像的小夥伴能夠直接使用cnpm,沒有安裝的使用npm)cnpm和npm的區別這裏就很少說了,不懂的小夥伴能夠百度前端

附圖一張:webpack

3.安裝好以後初始化一下,(初始化的主要目的是生成package.json文件)在命令行工具中輸入: cnpm init,輸入完成後,會有一系列的內容,會問到你關於項目的名稱,描述等等,這裏可隨意填寫web

4.初始化完成後,對項目目錄進行安裝,第二步的-g是全局安裝,官方不推薦使用,好比你的項目使用的是webpack2.X版本,這樣就會覆蓋以前的版本,致使項目配置錯誤。npm

輸入命令:cnpm install --save-dev webpack,安裝後以後,能夠看看是否安裝成功,輸入命令webpack -v 便可  (注:--save-dev:本地安裝到開發環境)json

這樣就安裝成功了babel

 

 

前端必學內容:webpack(模塊打包器模塊化

webpack3 學習內容,點擊便可到達工具

(1).webpack快速入門——如何安裝webpack及注意事項

(2).webpack快速入門——webpack3.X 快速上手一個Demo   

(3).webpack快速入門——配置文件:入口和出口,多入口、多出口配置 

(4).webpack快速入門——配置文件:服務和熱更新

(5).webpack快速入門——CSS文件打包

(6).webpack快速入門——配置JS壓縮,打包

(7).webpack快速入門——插件配置:HTML文件的發佈

(8).webpack快速入門——CSS中的圖片處理

(9).webpack快速入門——CSS分離與圖片路徑處理

(10).webpack快速入門——處理HTML中的圖片

(11).webpack快速入門——CSS進階,Less文件的打包和分離

(12).webpack快速入門——CSS進階:SASS文件的打包和分離

(13).webpack快速入門——CSS進階:自動處理CSS3前綴

(14).webpack快速入門——CSS進階:消除未使用的CSS

(15).webpack快速入門——給webpack增長babel支持

(16).webpack快速入門——打包後如何調試

(17).webpack快速入門——實戰技巧:開發和生產並行設置

(18).webpack快速入門——實戰技巧:webpack模塊化配置

(19).webpack快速入門——實戰技巧:優雅打包第三方類庫

(20).webpack快速入門——實戰技巧:watch的正確使用方法,webpack自動打包

(21).webpack快速入門——實戰技巧:webpack優化黑技能

(22).webpack快速入門——集中拷貝靜態資源

(23).webpack快速入門——Json配置文件使用

 

若是個人內容對你有幫助,歡迎打賞post

相關文章
相關標籤/搜索