Webpack执行命令参数详解

 更新时间:2017年06月17日 09:35:36   作者:胜天半子丶  
本篇文章主要介绍了Webpack执行命令参数详解 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、概述

前面的章节我们讲解了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命令执行之后就会停止。下面我们修改一下login.js内容,看看终端会有什么改变:

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

module.exprots.login=function(){

};

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

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

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

相关文章

  • JS数组方法reverse()用法实例分析

    JS数组方法reverse()用法实例分析

    这篇文章主要介绍了JS数组方法reverse()用法,结合实例形式分析了JS数组reverse()方法基本功能、用法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • javascript跨域的4种方法和原理详解

    javascript跨域的4种方法和原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。
    2014-04-04
  • javascript编写实用的省市选择器

    javascript编写实用的省市选择器

    这篇文章主要介绍了javascript编写实用的省市选择器的方法及示例分享,非常不错,推荐给有相同需求的小伙伴们。
    2015-02-02
  • js 概率计算(简单版)

    js 概率计算(简单版)

    这篇文章主要介绍了js 概率计算(简单版),需要的朋友可以参考下
    2017-09-09
  • 详解Javascript中document.execCommand()的用法以及指令参数列表

    详解Javascript中document.execCommand()的用法以及指令参数列表

    execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令。在HTML5中,execCommand可以通过JavaScript代码来调用,使得开发者可以在网页中实现一些复杂的文本操作。在HTML编辑器中这个命令用得很多,酷炫的强大功能。
    2023-07-07
  • 微信jssdk踩坑之签名错误invalid signature

    微信jssdk踩坑之签名错误invalid signature

    这篇文章主要介绍了微信jssdk踩坑之签名错误invalid signature,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JavaScript中如何跳出forEach循环代码示例

    JavaScript中如何跳出forEach循环代码示例

    循环遍历一个元素是开发中最常见的需求之一,下面这篇文章主要给大家介绍了关于JavaScript中如何跳出forEach循环的相关资料,文章通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 疯掉了,尽然有js写的操作系统

    疯掉了,尽然有js写的操作系统

    疯掉了,尽然有js写的操作系统...
    2007-04-04
  • JS前端首屏优化技巧

    JS前端首屏优化技巧

    这篇文章主要为大家介绍了JS前端首屏优化技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 如何利用Web Speech API之speechSynthesis实现文字转语音功能

    如何利用Web Speech API之speechSynthesis实现文字转语音功能

    Web Speech API使你能够将语音数据合并到Web应用程序中,SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音,这篇文章主要介绍了利用Web Speech API之speechSynthesis实现文字转语音功能,需要的朋友可以参考下
    2024-06-06

最新评论