这节课讲解一下,在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对应的配置文件。现在我可以通过另外一种形式来对代码进行一次变更。

webpack.dev.js
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

webpack.dev.js
const webpack = require('webpack');
const devConfig = {
}
module.exports = devConfig;
prod也做同样的处理,这样我导出的就不是融合过后的文件。而是自己独立的配置文件。接着我们打开webpack.common.js,去引入merge,dev和prod
webpack.common.js

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中环境变量的使用方法的更多相关文章

  1. postman中环境变量的设置方法、使用方法和实际中常见使用场景

    文中共介绍2种添加环境变量的方法.2种使用环境变量的方法,以及不同方法的适用范围. 文中给出了环境变量的两种常见使用场景:切换环境.动态参数关联(前一个请求的响应作为下一个请求的入参) 2种添加环境变 ...

  2. lanmp中环境变量的更改方法

    1.vim /etc/profile 改成: export PATH=$PATH:/www/wdlinux/phps/71/bin/ 然后运行: source /etc/profile

  3. Linux中环境变量文件及配置

    Linux中环境变量文件及配置   一.环境变量文件介绍 转自:http://blog.csdn.net/cscmaker/article/details/7261921 Linux中环境变量包括系统 ...

  4. Linux中环境变量文件及配置(转载)

    一.环境变量文件介绍 转自:http://blog.csdn.net/cscmaker/article/details/7261921 Linux中环境变量包括系统级和用户级,系统级的环境变量是每个登 ...

  5. TP v5中环境变量在项目中的应用

    环境变量,顾名思义就是在不同的系统环境,同一个变量的值可以有所不同. 如开发环境.测试环境与正式环境下,数据库配置.静态资源文件Url前缀.缓存.各种key等配置都不相同,对于提交到仓库中的代码,理论 ...

  6. ubuntu下关于profile和bashrc中环境变量的理解(转)

    ubuntu下关于profile和bashrc中环境变量的理解(转)   (0) 写在前面 有些名词可能需要解释一下.(也可以先不看这一节,在后面看到有疑惑再上来看相关解释) $PS1和交互式运行(r ...

  7. Jenkins可用环境变量以及使用方法

    Jenkins可用环境变量以及使用方法

  8. Linux中环境变量中文件执行顺序

        Linux 的变量可分为两类:环境变量和本地变量   环境变量:或者称为全局变量,存在于所有的shell 中,在你登陆系统的时候就已经有了相应的系统定义的环境变量了.Linux 的环境变量具有 ...

  9. Node.js中环境变量process.env详解

    Node.js中环境变量process.env详解process | Node.js API 文档http://nodejs.cn/api/process.html官方解释:process 对象是一个 ...

随机推荐

  1. DefaultListBeanFactory的子类之SimpleAliasRegistry

    DefaultListBeanFactory类结构层次图 从继承图看,SimpleAliasRegistry是DefaultListBeanFactory继承类中最底层的实现类. SimpleAlia ...

  2. 【CUDA开发】论CUDA和LAV解码器是否真的实用

    先说配置,我电脑E3V3+GTX780TI视频就一个普通的720P AVC1编码MP4视频,实时检测软件是CPU-Z和GPU-Z,AIDA64[全默认设置]全部用ptoplayer默认播放时候,播放3 ...

  3. 最新 海看java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.海看等10家互联网公司的校招Offer,因为某些自身原因最终选择了海看.6.7月主要是做系统复习.项目复盘.LeetCode ...

  4. python 内置函数input/eval(22)

    python的内置函数其实挺多的,其中input和eval算得上比较特殊,input属于交互式内置函数,eval函数能直接执行字符串表达式并返回表达式的值. 一.input函数 input是Pytho ...

  5. cent8安装postgres

    postgres是一款免费.开源的对象型关系数据库,其在cent8的安装方式与cent7的不太一样,特此记录. 步骤: 1 安装postgres server dnf install postgres ...

  6. Mui 沉浸模式以及状态栏颜色改变

    手机的顶部状态栏,也就是信号.电量那条,有4种状态,分别是正常.变色.透明(也称沉浸式状态栏).消失(也就是全屏).后3种特殊用法,具体见下: 这些都是真机运行不生效,需提交App云端打包后才生效: ...

  7. Java基础---Java 开发工具IntelliJ IDEA 安装

    1.1 开发工具概述IDEA是一个专门针对Java的集成开发工具(IDE),由Java语言编写.所以,需要有JRE运行环境并配置好环境变量.它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公 ...

  8. python爬虫框架scrapy 豆瓣实战

    Scrapy 官方介绍是 An open source and collaborative framework for extracting the data you need from websit ...

  9. CSS之cursor用法

    cursor: url('~ROOT/shared/assets/image/vn-text-cursor-31-49.png') 22 22, nw-resize; 另外还有一个 cursor: g ...

  10. MySQL5.7主从从配置

    主从从,也称为级联主从,数据流向:A(主)->B(从)->C(从从),主从从级联复制. 应用场景 在主从配置的基础上,再增加一个从库,进一步提高数据安全,容灾备份. 读写分离,从库只用于查 ...