webpack命令行

简介:

前面的话

  webpack提供了命令行接口(CLI),以便对构建过程进行配置和交互。这对于制定早期原型、轮廓、编写 npm 脚本 或者一些个人自定义需求很有用。本文将详细介绍webpack的命令行接口

 

常用配置

【--help】

  列出命令行所有可用的配置选项

webpack --help
webpack -h

【--config】

  指定其它的配置文件。配置文件默认为 webpack.config.js,如果想使用其它配置文件,可以加入这个参数

webpack --config example.config.js

【--progress】

  打印出编译进度的百分比值

webpack --progress

【--watch】 

  观察文件系统的变化

webpack --watch
webpack -w

【--colors】

  开启/关闭控制台的颜色 [默认值: (supports-color)]

webpack --colors
webpack --color

【-p】

  压缩混淆脚本

webpack -p

【--profile】

  记录编译的性能数据,并且输出。它会告诉你编译过程中哪些步骤耗时最长,这对于优化构建的性能很有帮助

 

脚本

  package.json文件中有scripts字段,该字段指定了运行脚本命令的npm命令行缩写。因此,我们可以把常用命令制作成脚本

//package.json
  "scripts": {    "w": "webpack --progress  --colors  --watch",    "p": "webpack -p",    "dev":"webpack-dev-server"
  }

  运行npm run w时,相当于运行webpack --progress --colors --watch,表示运行监视模式,使用彩色字符,并显示出打包的百分比过程

  运行npm run p时,相当于运行webpack -p,表示压缩模块文件

  运行npm run dev时,相当于运行webpack-dev-server,表示运行本地服务器















本文转自xsster51CTO博客,原文链接:http://blog.51cto.com/12945177/1950676 ,如需转载请自行联系原作者




相关文章
|
10月前
|
人工智能 编解码 API
用行动回应“实体清单”,智谱发布了一系列新模型
1月15日,美国商务部将25个中国实体列入出口管制实体清单,其中包括智谱及其子公司。面对制裁,智谱迅速回应,表示不会影响业务,并于次日发布全新端到端模型GLM-Realtime、升级GLM-4-Air和GLM-4V-Plus模型,推出免费的Flash系列普惠模型。这些举措展示了智谱在多模态交互、视频理解、语音交互等领域的技术实力,体现了中国AI企业在自主创新和自主可控方面的坚定决心。此举不仅彰显了智谱的技术硬实力,也为中国AI产业的自立自强树立了榜样。
243 24
|
缓存 资源调度 监控
Webpack 5新特性详解与性能优化实践
Webpack 5通过确定性的Chunk ID、模块ID和导出ID实现了长期缓存,这意味着相同的输入将始终产生相同的输出。这样,当你的用户再次访问更新后的网站时,浏览器可以重用旧的缓存,而不是重新下载所有资源。
247 2
|
JavaScript
Vue3——使用inject和provide对页面进行刷新
使用inject和provide对页面进行刷新
1285 0
|
Linux 网络安全 开发工具
|
6天前
|
云安全 人工智能 安全
AI被攻击怎么办?
阿里云提供 AI 全栈安全能力,其中对网络攻击的主动识别、智能阻断与快速响应构成其核心防线,依托原生安全防护为客户筑牢免疫屏障。
|
16天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
10天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
625 217