亲测好用系列：package.json中常用的webpack插件以及作用

最新推荐文章于 2023-07-21 10:47:29 发布
原创 最新推荐文章于 2023-07-21 10:47:29 发布 · 1.3k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#webpack
本文介绍了在package.json中如何使用webpack插件，如cross-env设置兼容性环境变量NODE_ENV，以及webpack-dev-server的实时监听、热替换等功能。通过NODE_ENV判断开发或生产环境，并利用webpack-dev-server的参数如--open、--inline、--hot等提高开发效率。

  1. cross-env： 忽略跨平台，兼容windows和mac系统
  2. NODE_ENV:  是用户一个自定义的环境变量
  3. NODE_ENV的用法：在webpack.config.js中通过 process.env.NODE_ENV 判断生产环境或开发环境的依据的
  • process ：node.API  全局变量
  • process.env:  读取项目运行环境的配置
  1. webpack-dev-server: 
  • webpack的一个插件，替代webpack --watch 实时监听源码并并执行打包的作用。
  • 一般配置在npm run dev命令中，一旦发现源码发生了改变，就会根据entry的入口文件路径自动执行打包，但不会放在outptu的目录下，会存在内存当中，因为这样可以提高运行效率。
  • --open 打开浏览器

  • --inline选项会为入口页面添加“热加载”功能，--hot选项则开启“热替换（Hot Module Reloading）”，即尝试重新加载组件改变的部分（而不是重新加载整个页面）。如果两个参数都传入，当资源改变时，webpack-dev-server将会先尝试HRM（即热替换），如果失败则重新加载整个入口页面


  • --progress: 显示百分比的进度条

  • --color： 变为彩色

  • --hide-modules： webpack-cli特有的，隐藏关于模块的信息 ( 以下截图中红框的部分)

  • 详情见webpack官网：https://www.webpackjs.com/api/cli/  

 

 

FiLM技术实战：如何在多模态视觉推理任务中高效合并特征（附PyTorch代码）
最新发布
weixin_30505225的博客
03-27 591
本文深入解析FiLM技术在多模态视觉推理任务中的高效特征融合方法，提供PyTorch实现代码与调优指南。FiLM通过仿射变换实现视觉与语言模态的特征对齐，具有参数效率高、训练稳定等优势，适用于视觉问答(VQA)等场景。文章还对比了不同融合方法的性能，并分享实战中的学习率设置、特征归一化等技巧。
[webpack-cli] Error: Unknown option ‘--hide-modules‘
Cheryl的加工厂
06-03 9777
执行npm run dev时，终端报错： [webpack-cli] Error: Unknown option '--hide-modules' 查看项目中安装的模块 npm ls --depth 0 发现原来是由于 laravel-mix@6.0.19 invalid版本与原项目的不匹配，导致webpack无法正常打包， 重新安装 npm install laravel-mix@2.1.14 再次执行npm run dev，打包成功！ ...
webpack 配置
assassin_0302的博客
04-29 300
参考地址：https://segmentfault.com/a/1190000012536871#articleHeader1 01: 配置选项 Config options: --config 配置文件路径，字符串格式，默认是`根目录`下的 webpack.config.js 或 webpackfile.js， --config-name 使用配置的名字，字符串 -...
四个问题详解
weixin_42491987的博客
11-18 527
问题一：get rebase和get merge区别 get rebase： 指令：git rebase -i [startpoint] [endpoint] （如不指定起止点，则默认是当前分支head指向的commit） 作用：git rebase操作实际上是将当前执行rebase分支的所有基于原分支提交点之后的commit打散成一个一个的patch，并重新生成一个新的commit hash值，再次基于原分支目前最新的commit点上进行提交，并不根据两个分支上实际的每次提交的时间点排序，rebase
webpack中的 chunk,module,bundle的区别，以及hidden modules是什么
dglf54292的博客
08-26 1655
hidden modules是什么: chunk,module,bundle的区别 总结: module是指任意的文件模块，等价于commonjs中的模块 chunks是webpack处理过程中被分组了的modules，如代码分割时一个异步加载的chunk可能包含多个module Bunldes是指打包出来的 ...
webpack学习笔记
冰冻三尺非一日之寒
06-14 491
简介 手写的typescript、less、jpg===》Loader===》js、css、png静态资源文件。 webpack 里，一张图片、一个css、一个字体都会被称为模块。 webpack 作用是处理模块间的关系，并把他们进行打包。 举例 加载 css 大多通过＜link＞标签引入 css 文件，而在 webpack 里，直 接在一个.js 文件中导入，比如： import ’ src/styles/index . css ’; 组成 webpack 的主要适用场...
Webpack配置详解（package.json/webpack.config.js详细配置 ）
热门推荐
SeaSunExpect的博客
10-27 1万+
Webpack配置详解（package.json/webpack.config.js详细配置 ） webpack安装 package.json配置以及模块安装 webpack.config.js配置 开启webpack-dev-server服务 热替换插件的安装以及配置 开启自动打开浏览器插件的安装以及配置 加载器的安装以及配置 完整package.json/webpack.config.js文件
构建json_开发插件package.json在webpack构建中的表现
weixin_32802111的博客
12-21 303
本文主要讲解开发插件时，package.json中main、module、browser字段填写与webpack构建的关系。测试环境准备首先我们准备好测试环境：|- demo |---- package-a |--------- browser.js |--------- module.js |--------- index.js |--------- pacakge.json |---- pac...
webpack打包的输出文件加上package.json记录的version版本号注释
huzhenv5的博客
01-08 5299
我们在webpack打包js文件时，为了方便校对输出的生产文件的版本，我们最好在输出的文件头部加上版本号注解，在package.json中有一个version字段记录我们整个node项目的版本号，那么我们如何将这个版本号加在webpack输出文件的注释上呢？完成效果如图： 添加注释可以用到webpack自带的BannerPlugin插件，然后在webpack.config.js中引入packag...
常用的package.json，还有这么多你不知道的骚技巧
LuckyWinty的博客
07-25 2524
前言 ???? 在每个项目的根目录下面，一般都会有一个 package.json 文件，其定义了运行项目所需要的各种依赖和项目的配置信息（如名称、版本、许可证等元数据）。大多数人对 pa...
[译] Webpack——令人困惑的地方
weixin_33881140的博客
05-09 1129
原文 Webpack—The Confusing Partsissue讨论 Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。 当我第一次看到Webpack的配置文件时，它看起来非常的陌生，我非常的疑惑。经过一段时间的尝试之后我认为这是因为W...
package.json中设置NODE_ENV环境场
AdleyTales的技术博客
01-16 6878
mac 和 windows 下设置的不一样 "scripts": { "dev-mac": "export NODE_ENV=development && node dev.js", "dev-win": "set NODE_ENV=development && node dev.js" }
【vue】webpack 配置使用
loyd3的博客
09-12 360
webpack安装 安装最新版的Node.js和NPM 创建一个目录，使用NPM初始化配置： npm init ; 完成后会在demo目录生成一个package.json 在本地局部安装webpack: npm install webpack webpack-cli --save-dev 安装webpack-dev-server：npm install webpack-dev-server --save-dev webpack配置 在目录DEMO下创建一个js文件，文件名为webpack.config
【VUE2.0】1、 webpack及插件的配置和使用
菜鸟日记
11-23 2217
前端工程化的概念 模块化 组件化 规范化 自动化 前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化 早期的前端工程化解决方案： grunt gulp 目前主流前端工程化解决方案： webpack ......
package.json中设置NODE_ENV环境
前端，请指教
06-22 2504
mac 和 windows 下设置的不一样 "scripts": { "dev-mac": "export NODE_ENV=development && node dev.js", "dev-win": "set NODE_ENV=development && node dev.js" }
package.json文件scripts脚本解读（npm scripts && shell和bash && process.env && NODE_ENV && cross-env）...
weixin_30650859的博客
07-23 1068
在package.json文件中，我们常常会看到这样的代码，并且也知道如何去执行脚本命令，但是，我们为什么可以这样使用呢？通过仔细阅读几篇文章，已经基本得到了答案，这里做一个简单的提炼、理解和记录。 一、什么是 npm 脚本 package.json文件里面的scripts字段中定义的就是npm脚本 二、npm脚本的原理 每当执行npm run，就会自动新建一个 Shell，在这个 ...
Webpack打包实用优化方案
大灰狼的小绵羊哥哥的博客
08-10 1万+
转载http://jdc.jd.com/archives/212653 简介: Webpack是当下最热门的前端资源模块化管理和打包工具。如何提升打包效率，成为了大家关注的点之一。下文将分享我们开发到上线的实用优化方案。 目前最火的打包工具莫过于 Webpack 了，关于 Webpack 的优化方案，网上有很多文章可以供大家参考。查阅前人的资料，总结自己在项目中遇到的问题，最终得出一些比较实用...
Webpack热更新打包启动项目
qq_43235503的博客
12-06 583
Webpack热更新打包启动项目
Node学习之package.json
皮蛋很白的博客
05-28 1500
什么是package.json Node.js项目遵循模块化的架构，当我们创建一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json 它包含了运行项目所需要的各种依赖、项目配置信息 创建package.json 快速创建 npm init -y package.json { "name": "demo", "version": "1.0.0", "description": "", "main": "main.js", "scripts": {
项目文件package.json的配置与.env[mode] 的一些配置作用
wjyxiaocainiao的博客
07-21 1729
同时提一下，在开发过程中还会有一个测试环境，比较多的公司会写成.env.test 这个名字就比较简单明了，还有的公司会写成，.env.staging 这个也是测试环境，刚开始看到我也比较懵，上网查找了一下才知道。最近看到的vue项目的.env 文件，其实这个是vue 的全局环境变量，使用vue-cli 创建项目的时候会默认生成一个.env 的文件，.env 可以存储不同的环境变量。两者都存在的时候，先加载全局文件，再加载环境配置文件，环境配置文件的变量和全局文件的变量相同，后者会覆盖前者。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值