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. 【转】SQL数据库日志文件收缩

    USE [master] GO ALTER DATABASE MDM_OperationBase SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE ...

  2. 分享张鑫旭大神的,纯css打字小技巧,我顺便收藏一下

    CSS代码: .typing { width: 15em; white-space: nowrap; border-right: 2px solid transparent; animation: t ...

  3. CSS3绘制特殊图形

  4. 2ci

  5. python基础第一天 3.27

    # #作业1# 猜年龄,可以让用户猜三次!age = 25user_guess = int(input("input your guess"))   age = 25count = ...

  6. 关于async 中return 和 return await 的差异

    小七平时在使用ES2017的 async功能经常会有如下: const bluebird = require('bluebird'); async function doSomething() { a ...

  7. 活代码LINQ——06

    一.模块代码 ' Fig. 9.4: LINQWithArrayOfObjects.vb ' LINQ to Objects using an array of Employee objects. M ...

  8. Python 的第一个小程序

    F盘   新建文本文档 hello.txt 内容为: print("hello world! hello 2018!"); 打开CMD cd c:\                 ...

  9. 记录前台js判断,如果为空,給议空的占位

    这个主要是根据所有的值,按顺序输出,如果没有值,就给予空的占位, //页面加载的时候获取左边和右边的所有游客id       var array_left_start = new Array();   ...

  10. static易错点

    package com.juemuren.Error; /** * static关键字的易错点 */class SuperClass{    static{        System.out.pri ...