Webpack执行命令参数详解


Posted in Javascript onJune 17, 2017

一、概述

前面的章节我们讲解了webpack的安装、webpack.config.js的 基本配置、webpack执行命名以及require方法的使用,不 知道大家有没有发现,当我们每次修改或者新增一个js文件的时候,就会重新执行一下webpack 命令进行编译,这种方式非常的麻烦,这样整个项目下来岂不是要执行百万次。接下来我们会讲解webpack相关的参数,避免这个情况。

二、参数详解

在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就会一直运行,而不是 像webpack命令执行之后就会停止。下面我们修改一下login.js内容,看看终端会有什么改变:

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

module.exprots.login=function(){

};

增加了login()方法,这个时候终端就会发生变化:

Webpack执行命令参数详解

和上个截图想对比,这里多出了只针对login.js文件编译的记录。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
jQuery实现增删改查
Dec 22 jQuery
JS实现留言板功能
Jun 17 #Javascript
利用vscode编写vue的简单配置详解
Jun 17 #Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 #Javascript
JS实现新建文件夹功能
Jun 17 #Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 #Javascript
JS实现商品筛选功能
Aug 19 #Javascript
node文件上传功能简易实现代码
Jun 16 #Javascript
You might like
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
JavaScript使用cookie
2007/02/02 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Python实现word2Vec model过程解析
2019/12/16 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
大学班级学风建设方案
2014/05/01 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
优秀教师先进材料
2014/12/16 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Python集合的基础操作
2021/11/01 Python