webpack的开发与线上环境的区分(1)

最新推荐文章于 2023-09-09 22:40:49 发布
最新推荐文章于 2023-09-09 22:40:49 发布
阅读量623 收藏 2
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_56659504/article/details/115700907
版权
本文介绍了三种区分webpack开发和线上环境的方法：1) 指定不同的配置文件，如webpack.dev.js和webpack.prod.js；2) 利用webpack的环境变量参数，通过--env在命令行传递环境变量；3) 使用node本身的环境变量NODE_ENV。这些方法只在打包阶段生效。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

区分开发和线上环境有几种方法，下面来给大家一一讲解：

1.通过–config来指定不同的配置文件。

在这里插入图片描述
通过webpack.dev.js和webpack.prod.js来区分不同的打包入口，当然习惯性把通用配置放在了webpack.common.js中，再通过webpack_merge插件来合并。

2.通过webpack中的环境变量参数。

什么叫环境变量？顾名思义大家可以理解成区分开发和线上环境的变量。在webpack的官方文档中我们可以看到介绍：
在这里插入图片描述
只要在打包命令中加入–env就可以在打包node进程中使用，命令如下：
在这里插入图片描述
图中我们可以看到在dev-build和build这两个开发环境和线上环境打包的命令中，都使用了webpack.common.js作为配置文件，不同的是build命令传入了一个production的环境变量。在webpack.common.js中这样使用：
在这里插入图片描述
在最后module.exports的时候，导出一个函

最低0.47元/天 解锁文章
安也 i
关注
三个环境，开发、测试和线上
weixin_42513912的博客
06-15 3638
这里是IT修真院分享 倒底什么是测试环境，什么是线上环境，开发环境又是什么，三者之间的关系怎么样？ 一 从【开发环境】说起 这是蛮荒之地，惟有力量和自然法则永存。 研发领域 开发环境是研发团队的领地，你可以把开发环境当成是蛮荒之地。 在这里，惟有力量和自然法则才是统治者： 野蛮的研发团队成群结队的出现，频繁的发布版本，经常爆...
vue开发版本和线上版本分离
jingkai0714的博客
10-25 232
做了哪些改变？ public里的index.html process.env.NODE_ENV是用来判断是否为开发版本的 分别为 production development 只有在production 时才用到cdn引入 不然平常开发时因为需要每次请求资源 所以页面渲染的慢 ​​​​ <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta htt..
webpack 在配置中区分是dev还是build
c347087870的博客
08-26 1605
在webpack.common中区分dev还是build，直接使用process.env.NODE_ENV是拿不到的，需要配合cross-env cnpm install cross-env --save-dev 修改package.json "build": "webpack --config webpack.prod.js --env.production", "serve": "cross-env NODE_ENV=dev webpack-dev-server --open --c.
在工作中会涉及到的几个环境（概念补充） 办公环境、开发环境、测试环境、线下环境、线上环境/生产环境都是什么，他们之间的关系？
最新发布
dream_ready的博客
09-09 668
在工作中会涉及到的几个环境（概念补充） 办公环境、开发环境、测试环境、线下环境、线上环境/生产环境都是什么，他们之间的关系？ 办公环境、开发环境、测试环境 也统称为 线下环境，外界用户无法访问到的 线上环境则是 外界用户 能够访问到的
webpack区分本地、测试、线上环境服务地址
qq_37200686的博客
11-08 547
webpack 区分不同环境
webpack-demo:一份基础的webpack配置，包含解析sass，提取（多个）css文件，热更新替换，开发线上环境区分，jQuery插件引入，页面文件资源引入，模块异步加载 等基础功能的配置
05-13
一份基础的webpack3配置指南，包含解析Sass/ES6，提取(多个)CSS文件，公共文件，热更新替换，开发线上环境区分，jQuery插件引入，页面文件资源引入，编写插件，模块异步加载 等基础功能 请移步使用，在笔者的中小...
webpack线上环境
08-20
- *1* *2* *3* [webpack的开发与线上环境的区分(1)](https://blog.youkuaiyun.com/weixin_56659504/article/details/115700907)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
掌握webpack和ant design实战：案例开发与环境区分
1. 它提供了不同环境下（开发环境和线上环境）的配置，这使得开发者可以在不同的阶段使用不同的配置文件，以达到更好的开发效率和应用性能。 2. 这个样例可以作为新手学习的范例，因为它提供了一个基本的配置框架，...
vue开发中api接口地址区分开发环境和线上环境
Mr.Yuan
08-14 1万+
相关文件 /config/dev.env.js // 本地开发配置 /config/prod.env.js // 线上打包配置 修改/config下的dev.env.js和prod.env.js这两个文件 dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = re...
webpack判断是本地还是线上
我的博客
05-17 382
process.env
区分本地和服务器环境处理代码
shuyaoyao的博客
09-28 796
背景： 在写脚本过程中，因为本地环境和服务期环境不一样，部分功能的代码需要根据当前环境单独处理，最开始的做法是传到服务器后再将不能用的代码注释，但是每次都这么做比较费时间 简单方法： 判断当前服务器ip，然后根据不同的IP处理不同代码 判断服务器ip方法，然后在其它地方直接调用该方法即可 # coding = utf-8 import socket def get_host_ip(): """ 查询本机ip地址 :return: """ try: s
vue如何判断项目是开发环境还是线上环境或者本地环境
Mygongzi的博客
09-02 9207
vue如何判断项目是开发环境还是线上环境或者本地环境
webpack配置完全指南
gogo2027的博客
11-15 616
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面：entry、output、mode、resolve、module、、plugin、source map、等，本文就来重点分析下这些部分。较小的输出包体积浏览器中更快的代码执行速度忽略开发中的代码不公开源代码或文件路径易于使用的输出资产浏览器调试工具快速增量编译可加快开发周期。
vue 判断 开发环境 和 线上环境
qq_17627195的博客
11-16 1504
if (process.env.NODE_ENV === "development"){ // 开发环境 } if(process.env.NODE_ENV === "production"){ // 线上环境 }
开发环境、测试环境、生产环境 -- 区别
热门推荐
yanglangdan的博客
10-14 6万+
开发环境（development）：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。(程序员接到需求后，开始写代码，开发，运行程序，看看程序有没有达到预期的功能；) 测试环境（testing）：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。(程序员开发完成后，交给测试部门全面的测试，看看所实现的功能...
软件开发环境－开发环境、测试环境、生产环境的区别
yangzaiqiu1986814的专栏
06-13 5万+
对于一个刚进入公司的新人来说，在熟悉工作环境的时候，会听着几个“老人”在自己可视范围之外或者轻松的讨论着业务，其措辞拿捏精准，期间，涉及到一系列的概念，可能会让你不觉明厉，暗叹：“高端，大气，上档次”。 有些术语，它既有官方称呼，也有通俗叫法，对于不觉明厉的我们只能在“不识庐山真面目，只缘身在此山中”的大山里漫步。（作为一名菜鸟，吐槽一下） 软件开发环境(Software Developmen
vue-cli3多个打包环境（开发环境，测试环境，线上环境）
weixin_45354225的博客
05-19 836
多个打包环境配置 yarn 命令和npm操作一样 操作用法： 默认地址：yarn run build 运行本地：yarn run dev 运行测试：yarn run test 运行生产：yarn run pro 具体实现步骤： 1 根目录新建 .env文件和 .env.test文件 env.dev文件配置： NODE_ENV = 'production' VUE_APP_FLAG = 'dev' outputD
vue-cli3.0线上环境和开发环境的配置
依古比古的博客
05-20 1001
我们一个项目中呢，有多个接口，我们在进行开发的时候呢，如何进行接口地址的切换。这个时候就用到了环境的切换。 vue-cli3.0线上环境和开发环境的配置 一：环境变量： 1.1 测试环境 test: "serve": "vue-cli-service serve --mode test", https://test.365msmk.com/ npm run test 1.1 本地环境 "serve": "vue-cli-service serve", npm run serve https:.
Webpack配置区分开发环境和生产环境
weixin_30502157的博客
09-27 1078
　　在项目开发的时候，我们通常会将程序分为开发环境和生产环境（或者叫线上环境），开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置，也就是方便我们开发人员调试开发的一种环境；生产环境通常指的是我们将程序开发完成经过测试之后无明显异常准备发布上线的环境，也可以理解为用户可以正常使用的就是生产环境； 　　当然开发环境和生产环境在配置方面的需求是不一样的，但是有共同点： 　　开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值