模組打包機--webpack--基礎使用
阿新 • • 發佈:2018-12-07
什麼是webpack? 作用有哪些?
WebPack可以看做是模組打包機:它做的事情是,分析你的專案結構,找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言(Scss,TypeScript等),並將其轉換和打包為合適的格式供瀏覽器使用
作用:
1、模組化,讓我們可以把複雜的程式細化為小的檔案;
2、類似於TypeScript這種在JavaScript基礎上拓展的開發語言:使我們能夠實現目前版本的JavaScript不能直接使用的特性,並且之後還能轉換為JavaScript檔案使瀏覽器可 以識別;
3、Scss,less等CSS前處理器
webpack的基本使用
溫馨提示:webpack4.0以上版本坑比較多,新手建議安裝4.0以下版本
1:webpack WebPack可以看做是模組打包機:它做的事情是,分析你的專案結構,找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言(Scss,TypeScript等),並將其轉換和打包為合適的格式供瀏覽器使用。 Webpack的工作方式是:把你的專案當做一個整體,通過一個給定的主檔案(如:index.js),Webpack將從這個檔案開始找到你的專案的所有依賴檔案,使用loaders處理它們,最後打包為一個(或多個)瀏覽器可識別的JavaScript檔案。 2:gulp,grunt
Gulp/Grunt是一種能夠優化前端的開發流程的工具,而WebPack是一種模組化的解決方案,不過Webpack的優點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是:在一個配置檔案中,指明對某些檔案進行類似編譯,組合,壓縮等任務的具體步驟,工具之後可以自動替你完成這些任務。
<使用webpack>
//全域性安裝
1、全域性安裝webpack npm install webpack -g 2、檢視版本號 : webpack -v 3、檢視全域性安裝過哪些模組:npm list -g --depth 0 4、區域性安裝webpack : npm install webpack --save-dev 5、基礎的打包方式 webpack 檔名 生成檔名
1、解除安裝預設: npm uninstall webpack 2、全域性安裝: npm install [email protected] -g 3、區域性安裝: npm install [email protected] --save-dev
1:webpack WebPack可以看做是模組打包機:它做的事情是,分析你的專案結構,找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言(Scss,TypeScript等),並將其轉換和打包為合適的格式供瀏覽器使用。 Webpack的工作方式是:把你的專案當做一個整體,通過一個給定的主檔案(如:index.js),Webpack將從這個檔案開始找到你的專案的所有依賴檔案,使用loaders處理它們,最後打包為一個(或多個)瀏覽器可識別的JavaScript檔案。 2:gulp,grunt
npm install -g webpack//安裝到你的專案目錄
npm install --save-dev webpack