webpack 如何区分开发环境和生产环境

第一种方法:

方法出处:命令行接口(CLI) | webpack 中文文档

1.利用webpack.config.js 返回的是个函数,利用函数的参数,来区分环境

  具体步骤

     1) package.json文件:在npm scripts 命令后面追加 --node-env production/development

  "build": "webpack --config webpack.config.js --node-env development"

   2)webpack.config.js 是个函数形式,可以看到函数有两个参数,把参数都打印出来看看,可以看到process.nodeEnv 既是上述 --node-env 后面设置的值

const path = require('path');
module.exports = (env,process)=>{console.log('Production: ', env); console.log('process',process);console.log(process.nodeEnv);return {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'webpack-numbers-test.js',library: {type:'umd',name:"webpackNumbersTest"},globalObject: 'this',clean:true},externals:{commonjs: 'lodash',commonjs2: 'lodash',amd: 'lodash',root: '_',}
};
}

第二种方法:

    1. 安装 cross-env

npm install cross-env -D

  2. 在package.json npm scripts 前面追加 cross-env NODE_ENV=production/development

 "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",

3.即可在webpack.config.js 中访问 process.env.NODE_ENV

第三种方法

将公共的,生产和开发的不同抽离出来,利用webpack-merge 进行合并 

方法出处:生产环境 | webpack 中文文档

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

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

相关文章

React组件通信——context(提供者/消费者)

Context 是 React 提供的一种组件间通信方式,主要用于解决跨层级组件 props 传递的问题。它允许数据在组件树中"跨级"传递,无需显式地通过每一层 props 向下传递。 一、Context 核心概念 1. 基本组成 React.createContext:创建 C…

“微信短剧小程序开发指南:从架构设计到上线“

1. 引言:短剧市场的机遇与挑战 近年来,短视频和微短剧市场呈现爆发式增长,用户碎片化娱乐需求激增。短剧小程序凭借轻量化、社交传播快、变现能力强等特点,成为内容创业的新风口。然而,开发一个稳定、流畅且具备商业价…

RPC与RESTful对比:两种API设计风格的核心差异与实践选择

# RPC与RESTful对比:两种API设计风格的核心差异与实践选择 ## 一、架构哲学与设计目标差异 1. **RPC(Remote Procedure Call)** - **核心思想**:将远程服务调用伪装成本地方法调用(方法导向) - 典型行为…

【pytest进阶】pytest之钩子函数

什么是 hook (钩子)函数 经常会听到钩子函数(hook function)这个概念,最近在看目标检测开源框架mmdetection,里面也出现大量Hook的编程方式,那到底什么是hook?hook的作用是什么? what is hook ?钩子hook,顾名思义,可以理解是一个挂钩,作用是有需要的时候挂一个东西…

深度学习计算——动手学深度学习5

环境:PyCharm python3.8 1. 层和块 块(block)可以描述 单个层、由多个层组成的组件或整个模型本身。 使用块进行抽象的好处: 可将块组合成更大的组件(这一过程通常是递归) 如 图5.1.1所示。通过定义代码来按需生成任意复杂度…

NodeJS的fs模块的readFile和createReadStream区别以及常见方法

Node.js 本身没有像 Java 那样严格区分字符流和字节流,区别主要靠编码(encoding)来控制数据是以 Buffer(二进制字节)形式还是字符串(字符)形式处理。 详细解释: 方面JavaNode.js字节…

基于二进制XOR运算的机器人运动轨迹与对称图像自动生成算法

原创:项道德(daode3056,daode1212) 新的算法出现,往往能给某些行业与产业带来革命与突破。为探索机器人运动轨迹与对称图像自动生成算法,本人已经通过18种算法的测试,最终,以二进制的XOR运算为…

Spring AI 项目实战(七):Spring Boot + Spring AI Tools + DeepSeek 智能工具平台(附完整源码)

系列文章 序号文章名称1Spring AI 项目实战(一):Spring AI 核心模块入门2Spring AI 项目实战(二):Spring Boot + AI + DeepSeek 深度实战(附完整源码)3Spring AI 项目实战(三):Spring Boot + AI + DeepSeek 打造智能客服系统(附完整源码)4Spring AI 项目实战(四…

spring-webmvc @RequestHeader 典型用法

典型用法 基础用法:获取指定请求头值 GetMapping("/info") public String getInfo(RequestHeader("User-Agent") String userAgent) {return "User-Agent: " userAgent; }如果请求中包含 User-Agent 请求头,则其值将被…

Ubuntu:20.04中安装docker

是的,您列出的命令是完整的安装步骤,但为了确保100%可靠性和处理可能的问题,我建议进行以下优化和补充: 完整优化的安装脚本(包含错误处理和验证) #!/bin/bash# 1. 彻底清理旧版本和配置 sudo apt remove…

大数据实时风控引擎:Spark Streaming、Kafka、Flink与Doris的融合实践

大数据实时风控引擎:Spark Streaming、Kafka、Flink与Doris的融合实践 在数字金融、电商交易与在线服务的核心战场,风险控制能力已成为业务的生命线。传统批量风控模式在应对瞬息万变的欺诈攻击、信用风险时捉襟见肘。本文将深入探讨如何利用**Spark St…

【创龙瑞芯微 RK3576 全国产 ARM 八核 2.2GHz 工业开发板-硬件说明书】

前 言 本文主要介绍TL3576-EVM评估板硬件接口资源以及设计注意事项等内容。 RK3576J/RK3576处理器的IO电平标准一般为1.8V、3.3V,上拉电源一般不超过3.3V或1.8V,当外接信号电平与IO电平不匹配时,中间需增加电平转换芯片或信号隔离芯片。按键或接口需考虑ESD设计,ESD器件…

一文吃透ADB,从入门到精通

目录 一、ADB 简介1.1 什么是 ADB1.2 ADB 的工作原理1.3 ADB 的安装与环境配置 二、ADB 基础命令2.1 设备连接相关命令2.2 应用管理命令2.3 文件传输命令 三、ADB 高级命令3.1 ADB Shell 深入探究3.2 日志查看与分析3.3 设备信息获取3.4 屏幕操作与录制 四、ADB 常见问题与解决…

PostgreSQL高可用架构设计与实践指南

# PostgreSQL高可用架构设计与实践指南 ## 一、高可用性核心诉求 PostgreSQL作为企业级关系型数据库,高可用设计需要满足以下关键指标: - 故障恢复时间(RTO):秒级到分钟级自动切换能力 - 数据损失容忍度&#xff0…

今天我想清楚了

首先说一声抱歉,很多天没有更新了,因为在我这里,我的内心感到迷茫,从来没有这样过,不知道为什么自己一直要做的事,进度太慢了,因为我的人生是空虚的,我感觉我做的不够好,…

代码随想录day3链表1

new关键字 1.new是一个关键字,用于开辟空间,开辟的空间在堆上,而一般声明的变量存放在栈上; 2.new得到的是一段空间的首地址。所以一般需要用指针来存放这段地址 new int(10);//返回new出来这块内存的地址int *pnew int(10);//…

taro小程序如何实现新用户引导功能?

一、需求背景 1、需要实现小程序新功能引导 2、不使用第三方库(第三方组件试了几个,都是各种兼容性问题,放弃) 二、实现步骤 1、写一个公共的guide组件,代码如下 components/Guide/index.tsx文件 import React, { …

键盘动作可视化技术浅析:如何做到低延迟显示

在做屏幕录制或者操作演示的时候,你是否遇到过这样的问题:观众看不清你按了哪个键、点了哪里?这是能完美解决这个问题的小工具Keyviz。它可以把你的键盘输入和鼠标点击实时显示在屏幕上,清晰直观,特别适合教学、录屏、…

Prufer序列 学习笔记

文章目录 P r u f e r Prufer Prufer 序列对树建立 P r u f e r Prufer Prufer 序列对 P r u f e r Prufer Prufer 序列重建树 应用Cayley 公式[HNOI2004] 树的计数「雅礼集训 2017 Day8」共[THUPC 2018] 城市地铁规划CF156D Clues[ARC106F] Figures P r u f e r Prufer Pruf…

高性能场景使用Protocol Buffers/Apache Avro进行序列化怎么实现呢

我们以Protocol Buffers(Protobuf)和Apache Avro为例,分别展示高性能序列化的实现方式。 由于两者都需要定义Schema,然后生成代码,因此步骤包括: 1. 定义Schema文件 2. 使用工具生成Java类 3. 在代码中…