關於webpack命令列的詳細介紹

前面的話

　　webpack提供了命令列介面（CLI），以便對建置過程進行設定和互動。這對於制定早期原型、輪廓、編寫 npm 腳本 或一些個人自訂需求很有用。本文將詳細介紹webpack的命令列介面

 

常用設定

#【--help】

　　列出命令列所有可用的設定選項

webpack --help
webpack -h

【--config】

#　　指定其它的設定檔。設定檔預設為webpack.config.js，如果想使用其它配置文件，可以加入這個參數

webpack --config example.config.js

【--progress】

　　列印出編譯進度的百分比值

webpack --progress

【--watch】 

　　觀察檔案系統的變化

webpack --watch
webpack -w

【--colors】

　　開啟/關閉控制台的顏色[預設值: (supports-color)]

webpack --colors
webpack --color

【-p】

　　壓縮混淆腳本

webpack -p

#【--profile】

　　記錄編譯的效能數據，且輸出。它會告訴你編譯過程中哪些步驟耗時最長，這對於最佳化建置的效能很有幫助

# 

　　package.json檔案中有scripts字段，該字段指定了執行腳本命令的npm命令列縮寫。因此，我們可以把常用指令製作成腳本

//package.json
  "scripts": {"w": "webpack --progress  --colors  --watch","p": "webpack -p","dev":"webpack-dev-server"
  }

　　執行npm run w時，相當於執行webpack --progress --colors --watch，表示執行監視模式，使用彩色字符，並顯示出打包的百分比過程

　　運行npm run p時，相當於運行webpack -p，表示壓縮模組文件

　　運行npm run dev時，相當於運行webpack-dev -server，表示執行本機伺服器

以上是關於webpack命令列的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！