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 对象是一个 ...
随机推荐
- 整理Vue.js 面试题
Vue.js 面试题整理 Vue项目结构介绍 build 文件夹:用于存放 webpack 相关配置和脚本. config 文件夹:主要存放配置文件,比如配置开发环境的端口号.开启热加载或开启gz ...
- golang web框架 beego 学习 (六) request body和module的映射
router.go package routers import ( "gowebProject/controllers" "github.com/astaxie/bee ...
- vbox配置共享磁盘
本人实在配置Oracle rac的时候,进行共享磁盘的配置 以下操作要在虚拟机关机的情况下进行: 接下来按照步骤走即可
- PAT甲级 字符串处理题_C++题解
字符串处理题 目录 <算法笔记> 重点摘要 1001 A+B Format (20) 1005 Spell It Right (20) 1108 Finding Average (20) ...
- Python笔记002-Python编程基础概念
第二章(1):Python编程基础概念 1. Python 程序的构成 Python 程序有模块组成.一个模块对应 Python 源文件,一般后缀名是:.py. 模块有语句组成.运行 Python程序 ...
- 关于Django ModelForm渲染时间格式问题
关于Django ModelForm渲染时间格式问题 直接定义DateTimeInput或者DateTimeFile是不行的,渲染在html页面中的仍然是Input text类型 解决办法:自定义小部 ...
- PHP关于VC11,VC9,VC6以及Thread Safe和Non Thread Safe版本选择的问题
这里是我在搭建php环境时收集的资料供大家参考: 现在PHP官网上下载PHP安装包都有VC11或VC9的字样,这是什么含义,我们应该下载哪种安装包更好呢?其实PHP官网给出了答案: VC6版本是使用V ...
- C# EF & linq 常用操作
一.EF的左连接 在EF中,当在dbset使用join关联多表查询时,连接查询的表如果没有建立相应的外键关系时,EF生成的SQL语句是inner join(内联),对于inner join,有所了解的 ...
- SQL Server 2017命令创建新账户(test-user),并分配数据库权限
-- 1. 创建登录账号USE [master];GOCREATE LOGIN [test-user] WITH PASSWORD = 'xysu7SZ193SNX6E{{HxubPE3}vr',DE ...
- c# 163网易发送邮件
是4.0的,说以添加包是 代码: public class SendEmailInfo { /// <summary> /// 发送邮件 /// </summary> /// ...