webpack入門篇--1.簡單介紹

標籤：開發包   包括   彩色   pac   它的   name   設定   一段   手工   

webpack是一個模組打包工具，給js準備的打包工具，可以把很多的模組打包成很少的檔案，特性:代碼分割，只載入所需檔案，模組通過loaders處理各種檔案
　　       處理過程:把有各種依賴的檔案通過webpack打包處理成css,js,圖片檔案
目標:1.切分依賴數，分到不同代碼塊裡，按需載入，懶加 載
　　2.任何靜態資源都可以被視為一個模組，在項目中被引用
　　3.整合第三方類庫，把類庫也視為它的模組，在項目中被引用
　　4.初始化載入時間更少
　　5.在整個打包過程中可以自訂
　　6.適合做大型項目
特性:代碼分割，loader,外掛程式系統，模組熱更新

 

檔案夾dist:存放最終發布版本的代碼
dev:開發人員版本，開發包

npm init:產生package.json，避免要手工產生

--save-dev：npm install 在安裝 npm 包時，有兩種命令參數可以把它們的資訊寫入 package.json 檔案，一個是npm install --save另一個是 npm install --save-dev
　　　　       --save-dev 是你開發時候依賴的東西，--save 是你發布之後還依賴的東西。
　　　　　　如果不使用–save/–save-dev安裝模組的話需要手動更新package.json裡的dependencies和devDepandencies，而使用–save/–save-dev就可以自動更新package.json了

 

webpack安裝好後，在檔案夾裡建立一個js檔案hello.js
命令列中在當前檔案夾下輸入webpack hello.js hello.bundle.js(每次寫完依賴，命令列執行此句即可)

輸出的內容:
Asset:打包產生的檔案名稱；Size:打包產生的檔案的大小；Chunks:這次打包的分塊；Chunk Name：這次打包的塊名稱

 

在js裡依賴負載檔案word.js在檔案頭部寫上：require(‘./word.js‘)
依賴css檔案:require(‘style-loader!css-loader!./style.css‘)需要安裝loader (npm install css-loader style-loader --save-dev)

 

--module-bind:模組綁定 --module-bind ‘css=style-loader!css-loader‘
--watch:這個可以自動更新更改過的代碼，無需每次更改代碼後都在命令列裡敲上檔案
--progress打包過程，有百分比進度顯示
--display-module:引用的所有模組都列出來，包括引用的方式
--display-reasons:模組打包原因列出來

 

自己設定參數可以在wenpack.json檔案裡scripts屬性裡添加一段指令碼，這個指令碼可以是一段命令，如:
"webpack":"webpack --config webpack.config.js(定義config檔案) --progress(看到打包過程) --display-modules(打包的模組) --colors(命令列裡打包出來字的顏色是彩色的)"
然後命令列裡輸入npm run webpack

webpack入門篇--1.簡單介紹