首頁 > web前端 > js教程 > 關於webpack命令列的詳細介紹

關於webpack命令列的詳細介紹

零下一度
發布: 2017-06-24 14:07:01
原創
3475 人瀏覽過

前面的話

  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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板