webpack有一个DefinePlugin接口,可以实现根据开发与生产环境配置不同变量。范例如下:

需求:开发环境请求baseUrl = '';生产环境请求 baseUrl = 'http://localhost:8066'

实施:

1,webpack.dev.config.js:

new webpack.DefinePlugin({
DEVELEPMENT: JSON.stringify(true),
PRODUCTION: JSON.stringify(false),
})

2,webpack.prod.config.js:

new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
DEVELEPMENT: JSON.stringify(false), })

3,utils.js:

if(PRODUCTION){
var baseUrl = ''
}else if(DEVELEPMENT){
var baseUrl = 'http://localhost:8066'
}
export default {
baseUrl
}

原文链接 https://blog.csdn.net/yingxiongfengyun2020/article/details/80661031?utm_source=copy

webpack根据开发与生产环境配置不同变量--webpack.DefinePlugin的更多相关文章

  1. 用前端姿势玩docker【四】基于docker快速构建webpack的开发与生产环境

    目录 用前端姿势玩docker[一]Docker通俗理解常用功能汇总与操作埋坑 用前端姿势玩docker[二]dockerfile定制镜像初体验 用前端姿势玩docker[三]基于nvm的前端环境构建 ...

  2. webpack开发与生产环境配置

    前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...

  3. webpack深入场景——开发环境和生产环境配置

    以前自己写一小项目时,webpack的配置基本就是一套配置,没有考虑生产环境和开发环境的区分,最近在做一个复杂的商城项目接触到了webpack的高级配置,经过两天的研究,写出了一份目前来说比叫满意的配 ...

  4. webpack开发环境配置和生产环境配置

    开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...

  5. Webpack4 学习笔记八 开发环境和生产环境配置

    webpack resolve属性 webpack 区分开发环境和生产环境 webpack resolve属性 该选项的作用是设置模块如何被解析. resolve.alias: 设置别名, 在vue中 ...

  6. webpack 之 一个简单的基本生产环境配置

    webpack 之 一个简单的基本生产环境配置 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = r ...

  7. 转 通过 spring 容器内建的 profile 功能实现开发环境、测试环境、生产环境配置自动切换

                                      软件开发的一般流程为工程师开发 -> 测试 -> 上线,因此就涉及到三个不同的环境,开发环境.测试环境以及生产环境,通常 ...

  8. 记录自己的 django管理 开发环境 和 生产环境 配置过程

    背景:自己的博客部署到服务器了,可每次上传服务器都要把配置重新该,包括数据库链接也得改,于是就需要管理开发环境和生产环境配置. 1, 这是目录结构,在blog下新建一个settings包,里面新建有c ...

  9. spring boot--日志、开发和生产环境切换、自定义配置(环境变量)

    Spring Boot日志常用配置: # 日志输出的地址:Spring Boot默认并没有进行文件输出,只在控制台中进行了打印 logging.file=/home/zhou # 日志级别 debug ...

随机推荐

  1. 2017年11月23日**科技面试java工程师面试总结

    从整个面试看了,表现并不理想,有很多不足. 1.关于手机页面闪现问题的处理.从原理上观察,页面闪现是因为异步请求导致的.在进入页面中首先会加载默认的东西,此时也会访问数据库端,会用ajax判断是否满足 ...

  2. node.js安装express模块应用服务框架

    1.创建工程文件夹case-04 2.在终端窗口进入文件夹目录,并输入:npm init,并一路回车,最后看到在case-04文件夹里自动生成了package.json 文件 3.打开vscode,进 ...

  3. SSH框架分页

    DAO层 /** * 分页查询全部员工,获取总记录数 */ public int totalPage(String className); /** * 分页查看,查看首页 */ public List ...

  4. Abp 中 模块 加载及类型自动注入 源码学习笔记

    注意 互相关联多使用接口注册,所以可以 根据需要替换. 始于 Startup.cs 中的  通过 AddApplication 扩展方法添加 Abp支持 1 services.AddApplicati ...

  5. Spark基本架构

    Spark基本架构图如下: Client:客户端进程,负责提交作业. Driver:一个Spark作业有一个spark context,一个Spark  Context对应一个Driver进程,作业的 ...

  6. iis 支持 .netcore 环境

    1,安装 dotnet-win-x64 https://dotnet.github.io/2,安装 DotNetCore.1.0.4_1.1.1-WindowsHosting.exe  https:/ ...

  7. Object.create()和new object()和{}的区别

    Object.create()介绍 Object.create(null) 创建的对象是一个空对象,在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如:toString ...

  8. JDBCUtils——C3P0

    需要导入的包: mysql-connector-java-5.1.37-bin.jar c3p0-0.9.2-pre5.jar mchange-commons-java-0.2.3.jar 如果使用D ...

  9. python 常用网站

    https://www.tutorialgateway.org/python-tutorial/

  10. erlang中http请求

    1..app文件中 {application,backend,[  {description,"ebank backend"},  {vsn,1.0},  {modules,[]} ...