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 相关文章推荐
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
javascript实现倒计时效果
Feb 17 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
php验证session无效的解决方法
2014/11/04 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
python获取mp3文件信息的方法
2015/06/15 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python中函数默认值使用注意点详解
2016/06/01 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python编写登陆接口的方法
2017/07/10 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
爸爸的花儿落了教学反思
2014/02/20 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
先进员工事迹材料
2014/12/20 职场文书
晚会闭幕词
2015/01/28 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
导游词之四川武侯祠
2019/10/21 职场文书