Webpack执行命令参数详解_网络技术_宿州市腾雀网络科技有限公司

Webpack执行命令参数详解

发布时间 - 2026-01-11 01:55:27 点击率：次

一、概述

前面的章节我们讲解了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文件编译的记录。

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

# webpack # 执行命令 # 命令参数 # 命令行参数 # webpack独立打包和缓存处理详解 # 详解webpack介绍&安装&常用命令 # 深入浅出webpack教程系列_安装与基本打包用法和命令参数详解 # 就会 # 自己的 # 都有 # 一句 # 很重要 # 可以看到 # 这个时候 # 当我们 # 非常重要 # 这块 # 上个 # 岂不是 # 多出 # 配置文件 # 大家多多 # 会有什么 # 想对 # 基本配置 # 主要是 # 而不是

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：html5基础怎么学_html5先记语义标签练布局再用JS做

下一篇：Debian上Tomcat如何进行日志分析

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：html5基础怎么学_html5先记语义标签练布局再用JS做

下一篇：Debian上Tomcat如何进行日志分析