Webpack执行命令参数详解

1、概述

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



2、参数详解

在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文件编译的记录。