webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用

在这里插入图片描述

本文讲的全部知识点,都是和webpack相关的。如果你之前有疑问,那本文一定能帮你搞清楚。

问题来源一般是类似下面代码(webpack.json中):

"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.dev.js"},

代码中出现的:cross-envNODE_ENV。还有webpack.config.js中设置的modeDefinePlugin

环境版本(如果是低版本下面也会提及):

  • webpack < v4
  • webpack-dev-server < v4
  • cross-env < v5

编译环境和运行环境

在讲下面之前,我们必须清楚什么是编译环境,什么是运行环境?

  • 编译环境(node环境)

我们在终端执行:npm run devnpm run start 或打包 npm run build 都是在编译环境,也就是node环境。所以webpack的配置文件 webpack.config.jswebpack.dev.jswebpack.production.js 是运行在编译环境中的。

  • 运行环境(浏览器环境)

我们写的业务代码等都是在浏览器中运行的,也就是打包之后我们的代码还在的。

只有区分这两个环境,才能理解下面不同配置方式,有时能读取到,有时读取不到的原因.

概念

mode

模式, webpack会根据mode的值做一些内置优化。

枚举值:none, developmentproduction(默认)。 只能是这三个值中某一个。

配置方式:

  • 方式一(推荐)

在webpack配置文件(webpack.config.js、webpack.develop.js、webpack.production.js)中设置:

module.exports = {mode: 'development'
};
  • 方式二

package.json中,webpack的CLI命令参数:

webpack serve --mode=development

这两种方式设置的mode值,只能在业务代码(运行环境)中通过process.env.NODE_ENV读取到;在编译环境,webpack配置文件中是读取不到的。

注意:

webpack 4+ 中,你不需要做任何设置(其实是webpack自动帮你把变量加到了DefinePlugin中)就可以在代码中读取process.env.NODE_ENV的值了。

但是在 webpack 3 及其更低版本中,你需要在webpack配置文件中使用 DefinePlugin设置成全局变量,才可以访问得到:

var webpack = require('webpack')module.exports = {// ...plugins: [// ...new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')})]
}

NODE_ENV

上面我们设置mode,是在运行环境中使用;如果想在编译环境(webpack配置文件中使用)就需要用到NODE_ENV了。

本质就是给当前Node进程,设置一个环境变量。只有在当前Node进程中有效。

设置方式:

package.json中:

{"scripts": {"dev": "NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"}
}

你如果是mac电脑执行npm run dev是能正常运行的,但如果你是windows电脑,会报错:

'NODE_ENV' 不是内部或外部命令,也不是可运行的程序或批处理文件。

是的,在windows里面需要修改命令为:

{"scripts": {"dev": "set NODE_ENV=development && webpack-dev-server --config ./config/webpack.config.dev.js"}
}

要解决跨环境问题,就要用到下面的cross-env了,我们一会在讲,还是先回来。

设置了NODE_ENV=development后,在哪使用,如何使用呢?

答案:只能在编译环境(webpack的配置文件webpack.config.js等)中使用。可以通过**process.env.NODE_ENV读取。**在业务代码中是无法读取的。

cross-env

为解决跨环境问题。

安装:

npm install cross-env@5

修改package.json中命令:

{"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"}
}

这样在macwindows中就都可以执行npm run dev了。

DefinePlugin

上面在讲mode时已经提到了DefinePlugin ,它主要用来定义一些全局变量,并会在 编译时 将你代码中的全局变量替换为具体值。这在需要根据开发模式与生产模式进行不同的操作时,非常有用。

new webpack.DefinePlugin({// 定义...
});
使用

传递给 DefinePlugin 的每个键都是一个标识符或多个以 . 连接的标识符。

  • 如果该值为字符串,它将被作为代码片段来使用。
  • 如果该值不是字符串,则将被转换成字符串(包括函数方法)。
  • 如果值是一个对象,则它所有的键将使用相同方法定义。
  • 如果键添加 typeof 作为前缀,它会被定义为 typeof 调用。

这些值将内联到代码中,从而允许通过代码压缩来删除冗余的条件判断。

new webpack.DefinePlugin({PRODUCTION: JSON.stringify(true),'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});

提示:

请注意,由于本插件会直接替换文本,因此提供的值必须在字符串本身中再包含一个 实际的引号 。通常,可以使用类似 '"production"' 这样的替换引号,或者直接用 JSON.stringify('production')

if (!PRODUCTION) {console.log('Debug info');
}if (PRODUCTION) {console.log('Production log');
}

未经 webpack 压缩过的代码:

if (!true) {console.log('Debug info');
}
if (true) {console.log('Production log');
}

经过压缩后:

console.log('Production log');

cross-env + DefinePlugin

确切的讲,使用cross-env可以定义任意Node全局环境变量,例如package.json中:

{"scripts": {"dev": "cross-env NODE_ENV=development PUBLIC_PATH=/ui webpack-dev-server --config webpack.dev.config.js"}
}

我们这里又新增了一个全局变量PUBLIC_PATH,用来设置URL基础路径。

在编译环境(webpack.config.js)中,可以直接使用process.env.PUBLIC_PATH获取。

并可以通过添加到DefinePlugin,在代码中使用

new webpack.DefinePlugin({PUBLIC_PATH: JSON.stringify(process.env.PUBLIC_PATH),
});

定义之后就可以在代码中使用了:

const url = PUBLIC_PATH + '/views'
console.log(url); // =>'/ui/views'

总结

  1. mode是设置执行模式,webpack4会自动将mode的值通过DefinePlugin设置为全局变量,业务代码中可以使用process.env.NODE_ENV读取值。
  2. NODE_ENV是设置Node环境变量,在webpack.config.js、webpack.dev.js等文件中通过process.env.NODE_ENV读取值。
  3. cross-env是用来解决跨环境的。
  4. DefinePlugin用来设置全局变量,在业务代码中通过process.env.xxx读取值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/2501.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

opencv android 使用笔记

目录 获取app路径&#xff1a; 下载&#xff1a;OpenCV-android-sdk cmakelist配置&#xff1a; 头文件路径&#xff1a; 编译报错&#xff1a;clang: error: linker command failed with exit code 1 (use -v to see invocation) 读取图片例子 保存mp4 获取app路径&am…

自定义一个RedisTemplate

1.引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><dependency><groupId>redis.clients</groupId><artifactId>jedis&…

springcloud Ribbon的详解

1、Ribbon是什么 Ribbon是Netflix发布的开源项目&#xff0c;Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端负载均衡的框架。 2、Ribbon能干什么 LB负载均衡(Load Balance)是什么&#xff1f;简单的说就是将用户的请求平摊的分配到多个服务上&#xff0c;从而达…

<前端>Electron-builder为公证后的app打更新信息latest.yml

MacOS下&#xff0c;Electron-builder可以很方便的为测试包app打更新信息&#xff08;latest-mac.yml&#xff09;。 但是&#xff0c;正式发布的时候&#xff0c;不可能用测试包app&#xff0c;因为还没有进行公证。如何为公证的app打latest-mac.yml呢。 其实观察latest-mac.y…

Keil和VSCode协同开发STM32程序

系列文章 STM32单片机系列专栏 C语言术语和结构总结专栏 文章目录 1. 配置环境 2. 测试打开工程 3. 测试编译工程 随着项目的复杂度上升&#xff0c;开发者不仅需要强大的硬件支持&#xff0c;还需要一个高效和灵活的开发环境。 vscode是一款集成大量可以便携开发插件的代码…

C++中的list类模拟实现

目录 list类模拟实现 list类节点结构设计 list类非const迭代器结构设计 迭代器基本结构设计 迭代器构造函数 operator()函数 operator*()函数 operator!()函数 operator(int)函数 operator--()函数 operator--(int)函数 operator()函数 operator->()函数 list…

TiDB 6.x 新特性解读 | Collation 规则

对数据库而言&#xff0c;合适的字符集和 collation 规则能够大大提升使用者运维和分析的效率。TiDB 从 v4.0 开始支持新 collation 规则&#xff0c;并于 TiDB 6.0 版本进行了更新。本文将深入解读 Collation 规则在 TiDB 6.0 中的变更和应用。 引 这里的“引”&#xff0c;…

Modbus转Profinet网关接称重设备与工控机通讯

Modbus转Profinet网关&#xff08;XD-MDPN100&#xff09;是一种能够实现Modbus协议和Profinet协议之间转换的设备。Modbus转Profinet网关可提供单个或多个RS485接口&#xff0c;使得不同设备之间可以顺利进行通信&#xff0c;进一步提升了工业自动化程度。 通过使用Modbus转Pr…

相亲平台app小程序

相亲平台app小程序是一种基于手机应用的微型程序&#xff0c;专为在线相亲交友活动设计。它提供了一系列的功能&#xff0c;旨在帮助用户更方便、更高效地找到心仪的伴侣。 首先&#xff0c;用户可以在个人资料部分上传照片、填写个人资料、设置兴趣爱好等信息&#xff0c;以便…

Electron+Vue3+ElectronForge整合 - 打包时整合 -分步打包

说明 本文介绍一下 Electron Vue3 的打包整合的基本操作。实现的效果是 &#xff1a; 1、一个正常的Vue3项目&#xff1b; 2、整合加入 Electron 框架 &#xff1a;开发时 Electron 加载的是开发的vue项目&#xff1b; 3、完成打包时整合&#xff1a;3.1 先完成vue3项目的正常…

Laravel 6 - 第十一章 中间件

​ 文章目录 Laravel 6 - 第一章 简介 Laravel 6 - 第二章 项目搭建 Laravel 6 - 第三章 文件夹结构 Laravel 6 - 第四章 生命周期 Laravel 6 - 第五章 控制反转和依赖注入 Laravel 6 - 第六章 服务容器 Laravel 6 - 第七章 服务提供者 Laravel 6 - 第八章 门面 Laravel 6 - …

深度解析:云计算的三宝——IaaS、PaaS和SaaS

4月22日&#xff0c;腾讯宣布旗下协作SaaS产品全面接入腾讯混元大模型&#xff0c;除去企业微信、腾讯会议、腾讯文档等“一门三杰”产品&#xff0c;腾讯乐享、腾讯电子签、腾讯问卷、腾讯云AI代码助手等协作SaaS产品也都已实现智能化升级。大模型应用落地再加速。 那么什么是…

2024年深圳杯东三省数学建模联赛A题论文首发第二种思路

深圳杯A题论文代码分享资料链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1L2NVgoefSW-yuqZjEB3wcw 提取码&#xff1a;sxjm 问题一 数据转换&#xff1a; 首先&#xff0c;我们将监测站的经纬度坐标转换为基于米的笛卡尔坐标系。这是因为在地面上的大尺度距离…

HarmonyOS开发案例:【音乐播放器】

介绍 使用ArkTS语言实现了一个简易的音乐播放器应用&#xff0c;主要包含以下功能&#xff1a; 播放应用中的音频资源文件&#xff0c;并可进行上一曲、下一曲、播放、暂停、切换播放模式&#xff08;顺序播放、单曲循环、随机播放&#xff09;等操作。结合后台任务管理模块&…

安全小课堂丨什么是暴力破解?如何防止暴力破解

什么是暴力破解&#xff1f; 暴力破解也可称为穷举法、枚举法&#xff0c;是一种比较流行的密码破译方法&#xff0c;也就是将密码进行一一推算直到找出正确的密码为止。比如一个6位并且全部由数字组成的密码&#xff0c;可能有100万种组合&#xff0c;也就是说最多需要尝试10…

JWT原理解析

一、概述 虽然现在很多的开发框架会支持JWT的使用&#xff0c;但是对JWT还是没有一个详细的了解&#xff0c;有很多疑惑&#xff1a; JWT比之前的session或者token有什么好处&#xff1f;JWT的构成元素是什么&#xff1f;JWT从生成到使用的详细流程&#xff1f; 二、 JWT 2…

SPI Flash and External SPI RAM(基于ESP32)

主要参考资料&#xff1a; 乐鑫ESP-IDF资料SPI Flash API: https://docs.espressif.com/projects/esp-idf/zh_CN/v5.1/esp32s3/api-reference/peripherals/spi_flash/index.html 乐鑫ESP-IDF资料SPI Flash and External SPI RAM Configuration: https://docs.espressif.com/pro…

场景 - 分库分表

分什么 数据量大分表&#xff0c;并发大分库 分表字段如何选择 如果对交易订单进行分表&#xff0c;可以选择的东西很多&#xff0c;比如说商户id&#xff0c;用户id&#xff0c;地区等等 分表的时候要考虑到数据倾斜问题 数据倾斜 比如说按商户号进行分表&#xff0c;一共…

pnpm 安装后 node_modules 是什么结构?为什么 webpack 不识别 pnpm 安装的包?

本篇研究&#xff1a;使用 pnpm 安装依赖时&#xff0c;node_modules 下是什么结构 回顾 npm3 之前&#xff1a;依赖树 缺点&#xff1a; frequently packages were creating too deep dependency trees, which caused long directory paths issue on Windowspackages were c…

Day 20 Linux的WEB服务——apache

WEB服务简介 目前主流的web服务器软件 Linux&#xff1a;apache &#xff0c; nginx Windows-server&#xff1a;IIS 服务器安装nginx或apache后&#xff0c;叫做web服务器&#xff08;又称WWW服务器&#xff09; web服务器软件属于C/S框架模型 web服务器是一种被动程序只…