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 对象是一个 ...
随机推荐
- javascript正则总结
目录 1. 正则基础知识 2. 正则实例 3. 正则常见问题 4. 开发常用validate 5. 网上整理的正则 1. 正则基础知识 精确匹配: /test/ 匹配一类字符:匹配a,b,c任一字符/ ...
- linux查看物理cpu的核数,个数,逻辑cpu的个数
# 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...
- Vue-cli中的安装方法
vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1.安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢 ...
- 【FFMPEG】I,P,B帧和PTS,DTS时间戳的关系
FFmpeg里有两种时间戳:DTS(Decoding Time Stamp)和PTS(Presentation Time Stamp). 顾名思义,前者是解码的时间,后者是显示的时间.要仔细理解这两个 ...
- 华为eNSP上的NAT地址转换配置
NAT是将IP数据报文报头中的IP地址转换为另一个IP地址的过程,主要用于实现内部网络(私有IP地址)访问外部网络(公有IP地址)的功能. 1.实验拓扑 地址表: 1.完成各个接口基本配置之后使用pi ...
- Haystack--基于Django的全文检索框架
好文章转载自:https://suguangti.cnblogs.com/p/11167097.html 阅读目录 1.什么是Haystack 2.安装 3.配置 4.处理数据 创建索引 5.设置视图 ...
- java连接zookeeper实现zookeeper的基本操作
Java服务端连接Zookeeper,进行节点信息的获取,管理…,整理成一个基本工具, 添加依赖: <dependency> <groupId>org.apache.zooke ...
- 《Tsinghua os mooc》第11~14讲 进程和线程
第十一讲 进程和线程 进程 vs 程序 程序 = 文件 (静态的可执行文件) 进程 = 执行中的程序 = 程序 + 执行状态 进程的组成包括程序.数据和进程控制块 同一个程序的多次执行过程对应为不同进 ...
- [转帖]linux常用命令大全(linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习)
linux常用命令大全(linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习) https://www.cnblogs.com/caozy/p/9261224.html 总结的挺好的 ...
- ARTS第六周打卡
Algorithm : 做一个 leetcode 的算法题 1.合并两个排序链表 2.树的子结构 3.二叉树的镜像 4.包含Min函数的栈 5.栈的压入.弹出 6.二叉搜索树的后序遍历 7.从上往下打 ...