Webpack執(zhí)行命令參數(shù)詳解
一、概述
前面的章節(jié)我們講解了webpack的安裝、webpack.config.js的 基本配置、webpack執(zhí)行命名以及require方法的使用，不 知道大家有沒有發(fā)現(xiàn)，當(dāng)我們每次修改或者新增一個(gè)js文件的時(shí)候，就會(huì)重新執(zhí)行一下webpack 命令進(jìn)行編譯，這種方式非常的麻煩，這樣整個(gè)項(xiàng)目下來豈不是要執(zhí)行百萬次。接下來我們會(huì)講解webpack相關(guān)的參數(shù)，避免這個(gè)情況。
二、參數(shù)詳解
在webpack執(zhí)行命令之后可以添加一些參數(shù)，這些參數(shù)都有自己的作用，下面是參數(shù)列表：
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）來打包 $ webpack --watch //監(jiān)聽變動(dòng)并自動(dòng)打包 $ webpack -p//壓縮混淆腳本，這個(gè)非常非常重要！ $ webpack -d//生成map映射文件，告知哪些模塊被最終打包到哪里了其中的 $ webpack --progress //顯示進(jìn)度條 $ webpack --color //添加顏色
-p 是很重要的參數(shù)，曾經(jīng)一個(gè)未壓縮的 700kb 的文件，壓縮后直接降到 180kb （主要是樣式這塊一句就獨(dú)占一行腳本，導(dǎo)致未壓縮腳本變得很大） 。
這里我們重點(diǎn)說一下 webpack --watch這個(gè)參數(shù)，這個(gè)參數(shù)就要的作用就是監(jiān)聽文件是否有改變，有改變就會(huì)重新編譯有改變的文件。這個(gè)命令非常有用，下面我們還是一個(gè)webpackDemo這個(gè)項(xiàng)目作為演示。
首先，在 終端執(zhí)行webpack --watch這個(gè)命令：
通過截圖可以看到執(zhí)行命令之后，webpack就會(huì)一直運(yùn)行，而不是 像webpack命令執(zhí)行之后就會(huì)停止。下面我們修改一下login.js內(nèi)容，看看終端會(huì)有什么改變：
var userName="68kejian.com";
module.exports.userName=userName;
module.exports.sayName=function(){
return userName;
};
module.exprots.login=function(){
};
增加了login()方法，這個(gè)時(shí)候終端就會(huì)發(fā)生變化:
和上個(gè)截圖想對(duì)比，這里多出了只針對(duì)login.js文件編譯的記錄。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS數(shù)組方法reverse()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法reverse()用法,結(jié)合實(shí)例形式分析了JS數(shù)組reverse()方法基本功能、用法與操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
這里說的js跨域是指通過js在不同的域之間進(jìn)行數(shù)據(jù)傳輸或通信，比如用ajax向一個(gè)不同的域請(qǐng)求數(shù)據(jù)，或者通過js獲取頁面中不同域的框架中(iframe)的數(shù)據(jù)。只要協(xié)議、域名、端口有任何一個(gè)不同，都被當(dāng)作是不同的域。2014-04-04
這篇文章主要介紹了javascript編寫實(shí)用的省市選擇器的方法及示例分享，非常不錯(cuò)，推薦給有相同需求的小伙伴們。2015-02-02
這篇文章主要介紹了js 概率計(jì)算(簡(jiǎn)單版),需要的朋友可以參考下2017-09-09
詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個(gè)對(duì)當(dāng)前文檔，當(dāng)前選擇或者給出范圍的命令。在HTML5中，execCommand可以通過JavaScript代碼來調(diào)用，使得開發(fā)者可以在網(wǎng)頁中實(shí)現(xiàn)一些復(fù)雜的文本操作。在HTML編輯器中這個(gè)命令用得很多，酷炫的強(qiáng)大功能。2023-07-07
微信jssdk踩坑之簽名錯(cuò)誤invalid signature
這篇文章主要介紹了微信jssdk踩坑之簽名錯(cuò)誤invalid signature，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JavaScript中如何跳出forEach循環(huán)代碼示例
循環(huán)遍歷一個(gè)元素是開發(fā)中最常見的需求之一,下面這篇文章主要給大家介紹了關(guān)于JavaScript中如何跳出forEach循環(huán)的相關(guān)資料,文章通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
瘋掉了,盡然有js寫的操作系統(tǒng)...2007-04-04
這篇文章主要為大家介紹了JS前端首屏優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
如何利用Web Speech API之speechSynthesis實(shí)現(xiàn)文字轉(zhuǎn)語音功能
Web Speech API使你能夠?qū)⒄Z音數(shù)據(jù)合并到Web應(yīng)用程序中,SpeechSynthesisUtterance是HTML5中新增的API,用于將指定文字合成為對(duì)應(yīng)的語音,這篇文章主要介紹了利用Web Speech API之speechSynthesis實(shí)現(xiàn)文字轉(zhuǎn)語音功能,需要的朋友可以參考下2024-06-06