webpack中环境变量的使用方法
"scripts": {
"dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js",
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js"
},
对应三个命令,分别是开发环境的一个命令 npm run dev。打包生成开发环境代码的命令 npm run dev-build。以及线上代码生成的一个命令 npm run build。现在我要借助两个配置文件来帮助我们去完成对应的打包,分别是dev对应配置文件和prod对应的配置文件。现在我可以通过另外一种形式来对代码进行一次变更。
const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js'); const devConfig = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase:'./dist',
open:true,
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
}
}
module.exports = merge(commonConfig, devConfig);
这是dev配置原始文件,其中引入了merge和commonConfig。现在我把他删掉,直接导出devConfig
const webpack = require('webpack');
const devConfig = {
}
module.exports = devConfig;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const merge = require('webpack-merge');
const devConfig = require('./webpack.dev');
const prodConfig = require('./webpack.prod'); const commonConfig = {
} module.exports = (env) => {
// 如果有这个全局变量,且是线上环境,否则是开发环境
if(env && env.production) {
return merge(commonConfig, prodConfig);
} else {
return merge(commonConfig, devConfig);
}
}
以前我们导出一个对象,这里我们导出一个函数,接收一个全局变量,怎么融合取决于传递进来的变量。是否有全局变量,是哪个环境决定
package.json
"scripts": {
"dev-build": "webpack --profile --json > stats.json --config ./build/webpack.common.js",
"dev": "webpack-dev-server --config ./build/webpack.common.js",
"build": "webpack --env.production --config ./build/webpack.common.js"
},
package.json里面走的都是webpack.common.js了。在build里面加入--env.production。其他不加默认走devConfig。各自运行。没问题。这样就不是通过不同的文件,而是都是走common,通过变量控制
webpack中环境变量的使用方法的更多相关文章
- postman中环境变量的设置方法、使用方法和实际中常见使用场景
文中共介绍2种添加环境变量的方法.2种使用环境变量的方法,以及不同方法的适用范围. 文中给出了环境变量的两种常见使用场景:切换环境.动态参数关联(前一个请求的响应作为下一个请求的入参) 2种添加环境变 ...
- lanmp中环境变量的更改方法
1.vim /etc/profile 改成: export PATH=$PATH:/www/wdlinux/phps/71/bin/ 然后运行: source /etc/profile
- Linux中环境变量文件及配置
Linux中环境变量文件及配置 一.环境变量文件介绍 转自:http://blog.csdn.net/cscmaker/article/details/7261921 Linux中环境变量包括系统 ...
- Linux中环境变量文件及配置(转载)
一.环境变量文件介绍 转自:http://blog.csdn.net/cscmaker/article/details/7261921 Linux中环境变量包括系统级和用户级,系统级的环境变量是每个登 ...
- TP v5中环境变量在项目中的应用
环境变量,顾名思义就是在不同的系统环境,同一个变量的值可以有所不同. 如开发环境.测试环境与正式环境下,数据库配置.静态资源文件Url前缀.缓存.各种key等配置都不相同,对于提交到仓库中的代码,理论 ...
- ubuntu下关于profile和bashrc中环境变量的理解(转)
ubuntu下关于profile和bashrc中环境变量的理解(转) (0) 写在前面 有些名词可能需要解释一下.(也可以先不看这一节,在后面看到有疑惑再上来看相关解释) $PS1和交互式运行(r ...
- Jenkins可用环境变量以及使用方法
Jenkins可用环境变量以及使用方法
- Linux中环境变量中文件执行顺序
Linux 的变量可分为两类:环境变量和本地变量 环境变量:或者称为全局变量,存在于所有的shell 中,在你登陆系统的时候就已经有了相应的系统定义的环境变量了.Linux 的环境变量具有 ...
- Node.js中环境变量process.env详解
Node.js中环境变量process.env详解process | Node.js API 文档http://nodejs.cn/api/process.html官方解释:process 对象是一个 ...
随机推荐
- DefaultListBeanFactory的子类之SimpleAliasRegistry
DefaultListBeanFactory类结构层次图 从继承图看,SimpleAliasRegistry是DefaultListBeanFactory继承类中最底层的实现类. SimpleAlia ...
- 【CUDA开发】论CUDA和LAV解码器是否真的实用
先说配置,我电脑E3V3+GTX780TI视频就一个普通的720P AVC1编码MP4视频,实时检测软件是CPU-Z和GPU-Z,AIDA64[全默认设置]全部用ptoplayer默认播放时候,播放3 ...
- 最新 海看java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.海看等10家互联网公司的校招Offer,因为某些自身原因最终选择了海看.6.7月主要是做系统复习.项目复盘.LeetCode ...
- python 内置函数input/eval(22)
python的内置函数其实挺多的,其中input和eval算得上比较特殊,input属于交互式内置函数,eval函数能直接执行字符串表达式并返回表达式的值. 一.input函数 input是Pytho ...
- cent8安装postgres
postgres是一款免费.开源的对象型关系数据库,其在cent8的安装方式与cent7的不太一样,特此记录. 步骤: 1 安装postgres server dnf install postgres ...
- Mui 沉浸模式以及状态栏颜色改变
手机的顶部状态栏,也就是信号.电量那条,有4种状态,分别是正常.变色.透明(也称沉浸式状态栏).消失(也就是全屏).后3种特殊用法,具体见下: 这些都是真机运行不生效,需提交App云端打包后才生效: ...
- Java基础---Java 开发工具IntelliJ IDEA 安装
1.1 开发工具概述IDEA是一个专门针对Java的集成开发工具(IDE),由Java语言编写.所以,需要有JRE运行环境并配置好环境变量.它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公 ...
- python爬虫框架scrapy 豆瓣实战
Scrapy 官方介绍是 An open source and collaborative framework for extracting the data you need from websit ...
- CSS之cursor用法
cursor: url('~ROOT/shared/assets/image/vn-text-cursor-31-49.png') 22 22, nw-resize; 另外还有一个 cursor: g ...
- MySQL5.7主从从配置
主从从,也称为级联主从,数据流向:A(主)->B(从)->C(从从),主从从级联复制. 应用场景 在主从配置的基础上,再增加一个从库,进一步提高数据安全,容灾备份. 读写分离,从库只用于查 ...