Webpack執(zhí)行命令參數(shù)詳解
一、概述
前面的章節(jié)我們講解了webpack的安裝、webpack.config.js的 基本配置、webpack執(zhí)行命名以及require方法的使用，不 知道大家有沒有發(fā)現(xiàn)，當我們每次修改或者新增一個js文件的時候，就會重新執(zhí)行一下webpack 命令進行編譯，這種方式非常的麻煩，這樣整個項目下來豈不是要執(zhí)行百萬次。接下來我們會講解webpack相關的參數(shù)，避免這個情況。
二、參數(shù)詳解
在webpack執(zhí)行命令之后可以添加一些參數(shù)，這些參數(shù)都有自己的作用，下面是參數(shù)列表：
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）來打包 $ webpack --watch //監(jiān)聽變動并自動打包 $ webpack -p//壓縮混淆腳本，這個非常非常重要！ $ webpack -d//生成map映射文件，告知哪些模塊被最終打包到哪里了其中的 $ webpack --progress //顯示進度條 $ webpack --color //添加顏色
-p 是很重要的參數(shù)，曾經一個未壓縮的 700kb 的文件，壓縮后直接降到 180kb （主要是樣式這塊一句就獨占一行腳本，導致未壓縮腳本變得很大） 。
這里我們重點說一下 webpack --watch這個參數(shù)，這個參數(shù)就要的作用就是監(jiān)聽文件是否有改變，有改變就會重新編譯有改變的文件。這個命令非常有用，下面我們還是一個webpackDemo這個項目作為演示。
首先，在 終端執(zhí)行webpack --watch這個命令：
通過截圖可以看到執(zhí)行命令之后，webpack就會一直運行，而不是 像webpack命令執(zhí)行之后就會停止。下面我們修改一下login.js內容，看看終端會有什么改變：
var userName="68kejian.com";
module.exports.userName=userName;
module.exports.sayName=function(){
return userName;
};
module.exprots.login=function(){
};
增加了login()方法，這個時候終端就會發(fā)生變化:
和上個截圖想對比，這里多出了只針對login.js文件編譯的記錄。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解如何用babel轉換es6的class語法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了詳解基于webpack&gettext的前端多語言方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了微信小程序渲染性能調優(yōu)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-07-07
這篇文章主要介紹了fetch 如何實現(xiàn)請求數(shù)據(jù)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
微信小程序使用setData修改數(shù)組中單個對象的方法分析
這篇文章主要介紹了微信小程序使用setData修改數(shù)組中單個對象的方法,結合具體實例形式分析了setData進行數(shù)組修改的相關操作技巧與注意事項,需要的朋友可以參考下2018-12-12
JavaScript與C# Windows應用程序交互方法...2007-06-06
這篇文章主要介紹了基于JS代碼實現(xiàn)圖片在頁面中旋轉效果 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
ES6允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring），下文中給大家提供了嵌套數(shù)組的解構例子，大家一起看看吧2017-09-09
這篇文章主要為大家介紹了GoJs連線繪圖模板Link使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
addEventListener()和removeEventListener()追加事件和刪除追加事件
這篇文章主要給大家介紹了關于addEventListener()和removeEventListener()追加事件和刪除追加事件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12