Webpack執行命令參數詳解

1、概述

前面的章節咱們講解了webpack的安裝、webpack.config.js的 基本配置、webpack執行命名以及require方法的使用，不 知道你們有沒有發現，當咱們每次修改或者新增一個js文件的時候，就會從新執行一下webpack 命令進行編譯，這種方式很是的麻煩，這樣整個項目下來豈不是要執行百萬次。接下來咱們會講解webpack相關的參數，避免這個狀況。



2、參數詳解

在webpack執行命令以後能夠添加一些參數，這些參數都有本身的做用，下面是參數列表：

 

$ webpack --config XXX.js //使用另外一份配置文件（好比webpack.config2.js）來打包

$ webpack --watch //監聽變更並自動打包

$ webpack -p//壓縮混淆腳本，這個很是很是重要！

$ webpack -d//生成map映射文件，告知哪些模塊被最終打包到哪裏了其中的 
$ webpack --progress //顯示進度條
$ webpack --color //添加顏色

-p 是很重要的參數，曾經一個未壓縮的 700kb 的文件，壓縮後直接降到 180kb （主要是樣式這塊一句就獨佔一行腳本，致使未壓縮腳本變得很大） 。

這裏咱們重點說一下 webpack --watch這個參數，這個參數就要的做用就是監聽文件是否有改變，有改變就會從新編譯有改變的文件。這個命令很是有用，下面咱們仍是一個webpackDemo這個項目做爲演示。

首先，在 終端執行webpack --watch這個命令：



經過截圖能夠看到執行命令以後，webpack就會一直運行，而不是 像webpack命令執行以後就會中止。下面咱們修改一下login.js內容，看看終端會有什麼改變：


 

var userName="68kejian.com";
module.exports.userName=userName;
module.exports.sayName=function(){
	return userName;
};

module.exprots.login=function(){

};

增長了login()方法，這個時候終端就會發生變化:


和上個截圖想對比，這裏多出了只針對login.js文件編譯的記錄。