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. Intellij IDEA 自动清除无效 import

    打开偏好设置: 输入auto import: 注:想在以后的工程中都自动清除,可以在File中如下图操作:

  2. Android 音视频深入 十六 FFmpeg 推流手机摄像头,实现直播 (附源码下载)

    源码地址https://github.com/979451341/RtmpCamera/tree/master 配置RMTP服务器,虽然之前说了,这里就直接粘贴过来吧 1.配置RTMP服务器 这个我不 ...

  3. go-ethereum源码分析 PartIII 共识流程

    A: js指令转化为新transaction 在web3上操作流程 1. import to web3 2. connect to peers 3. read local key store 4. d ...

  4. MySQL运用

    进入mysql 命令行: mysql -uroot -p查看所有数据库: show databases;创建数据库: create database niu charset utf8;删除数据库: d ...

  5. oracle 字符串 正则表达式 拆分,排序,合并

    需求,表数据如:要求圈中的数据,必须根据线芯有序排列. 思路: 1.首先根据分号分隔元素.oracle 很蛋疼,没有提供字符串分隔函数,网上倒是多觉得有点麻烦,耐着性子继续网上找了下,还真让我找到一篇 ...

  6. Spring学习之实例化bean的三种方式

    实例化bean的三种方式 构造器实例化bean Person.java public class Person { private String name; private Integer age; ...

  7. pyinstaller深入使用,打包指定模块,打包静态文件

    1.标准用法: pyinstall  **.py  直接打包    pyinstall -F **.py  打包成单文件    pyinstall -W **.py  去掉控制台窗口,黑窗口    p ...

  8. Angular No name was provided for external module 'XXX' in output.globals 错误

    Angular 7 开发自定义库时,引用ngZorroAntd,build过程中出现 No name was provided for external module 'ng-zorro-antd' ...

  9. C# 异常:索引超出了数组界限。

    数组如果只取到了三个元素, 而引用数组的时候引用了五个, 就会有此错误.

  10. Linux系统调用列表(转)

    以下是Linux系统调用的一个列表,包含了大部分常用系统调用和由系统调用派生出的的函数.这可能是你在互联网上所能看到的唯一一篇中文注释的Linux系统调用列表,即使是简单的字母序英文列表,能做到这么完 ...