webpack命令行 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　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，表示運行本地服務器

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄