webpack根据开发与生产环境配置不同变量--webpack.DefinePlugin
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的更多相关文章
- 用前端姿势玩docker【四】基于docker快速构建webpack的开发与生产环境
目录 用前端姿势玩docker[一]Docker通俗理解常用功能汇总与操作埋坑 用前端姿势玩docker[二]dockerfile定制镜像初体验 用前端姿势玩docker[三]基于nvm的前端环境构建 ...
- webpack开发与生产环境配置
前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...
- webpack深入场景——开发环境和生产环境配置
以前自己写一小项目时,webpack的配置基本就是一套配置,没有考虑生产环境和开发环境的区分,最近在做一个复杂的商城项目接触到了webpack的高级配置,经过两天的研究,写出了一份目前来说比叫满意的配 ...
- webpack开发环境配置和生产环境配置
开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...
- Webpack4 学习笔记八 开发环境和生产环境配置
webpack resolve属性 webpack 区分开发环境和生产环境 webpack resolve属性 该选项的作用是设置模块如何被解析. resolve.alias: 设置别名, 在vue中 ...
- webpack 之 一个简单的基本生产环境配置
webpack 之 一个简单的基本生产环境配置 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = r ...
- 转 通过 spring 容器内建的 profile 功能实现开发环境、测试环境、生产环境配置自动切换
软件开发的一般流程为工程师开发 -> 测试 -> 上线,因此就涉及到三个不同的环境,开发环境.测试环境以及生产环境,通常 ...
- 记录自己的 django管理 开发环境 和 生产环境 配置过程
背景:自己的博客部署到服务器了,可每次上传服务器都要把配置重新该,包括数据库链接也得改,于是就需要管理开发环境和生产环境配置. 1, 这是目录结构,在blog下新建一个settings包,里面新建有c ...
- spring boot--日志、开发和生产环境切换、自定义配置(环境变量)
Spring Boot日志常用配置: # 日志输出的地址:Spring Boot默认并没有进行文件输出,只在控制台中进行了打印 logging.file=/home/zhou # 日志级别 debug ...
随机推荐
- Intellij IDEA 自动清除无效 import
打开偏好设置: 输入auto import: 注:想在以后的工程中都自动清除,可以在File中如下图操作:
- Android 音视频深入 十六 FFmpeg 推流手机摄像头,实现直播 (附源码下载)
源码地址https://github.com/979451341/RtmpCamera/tree/master 配置RMTP服务器,虽然之前说了,这里就直接粘贴过来吧 1.配置RTMP服务器 这个我不 ...
- go-ethereum源码分析 PartIII 共识流程
A: js指令转化为新transaction 在web3上操作流程 1. import to web3 2. connect to peers 3. read local key store 4. d ...
- MySQL运用
进入mysql 命令行: mysql -uroot -p查看所有数据库: show databases;创建数据库: create database niu charset utf8;删除数据库: d ...
- oracle 字符串 正则表达式 拆分,排序,合并
需求,表数据如:要求圈中的数据,必须根据线芯有序排列. 思路: 1.首先根据分号分隔元素.oracle 很蛋疼,没有提供字符串分隔函数,网上倒是多觉得有点麻烦,耐着性子继续网上找了下,还真让我找到一篇 ...
- Spring学习之实例化bean的三种方式
实例化bean的三种方式 构造器实例化bean Person.java public class Person { private String name; private Integer age; ...
- pyinstaller深入使用,打包指定模块,打包静态文件
1.标准用法: pyinstall **.py 直接打包 pyinstall -F **.py 打包成单文件 pyinstall -W **.py 去掉控制台窗口,黑窗口 p ...
- 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' ...
- C# 异常:索引超出了数组界限。
数组如果只取到了三个元素, 而引用数组的时候引用了五个, 就会有此错误.
- Linux系统调用列表(转)
以下是Linux系统调用的一个列表,包含了大部分常用系统调用和由系统调用派生出的的函数.这可能是你在互联网上所能看到的唯一一篇中文注释的Linux系统调用列表,即使是简单的字母序英文列表,能做到这么完 ...