这节课讲解一下,在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. javascript正则总结

    目录 1. 正则基础知识 2. 正则实例 3. 正则常见问题 4. 开发常用validate 5. 网上整理的正则 1. 正则基础知识 精确匹配: /test/ 匹配一类字符:匹配a,b,c任一字符/ ...

  2. linux查看物理cpu的核数,个数,逻辑cpu的个数

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  3. Vue-cli中的安装方法

    vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1.安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢 ...

  4. 【FFMPEG】I,P,B帧和PTS,DTS时间戳的关系

    FFmpeg里有两种时间戳:DTS(Decoding Time Stamp)和PTS(Presentation Time Stamp). 顾名思义,前者是解码的时间,后者是显示的时间.要仔细理解这两个 ...

  5. 华为eNSP上的NAT地址转换配置

    NAT是将IP数据报文报头中的IP地址转换为另一个IP地址的过程,主要用于实现内部网络(私有IP地址)访问外部网络(公有IP地址)的功能. 1.实验拓扑 地址表: 1.完成各个接口基本配置之后使用pi ...

  6. Haystack--基于Django的全文检索框架

    好文章转载自:https://suguangti.cnblogs.com/p/11167097.html 阅读目录 1.什么是Haystack 2.安装 3.配置 4.处理数据 创建索引 5.设置视图 ...

  7. java连接zookeeper实现zookeeper的基本操作

    Java服务端连接Zookeeper,进行节点信息的获取,管理…,整理成一个基本工具, 添加依赖: <dependency> <groupId>org.apache.zooke ...

  8. 《Tsinghua os mooc》第11~14讲 进程和线程

    第十一讲 进程和线程 进程 vs 程序 程序 = 文件 (静态的可执行文件) 进程 = 执行中的程序 = 程序 + 执行状态 进程的组成包括程序.数据和进程控制块 同一个程序的多次执行过程对应为不同进 ...

  9. [转帖]linux常用命令大全(linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习)

    linux常用命令大全(linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习) https://www.cnblogs.com/caozy/p/9261224.html 总结的挺好的 ...

  10. ARTS第六周打卡

    Algorithm : 做一个 leetcode 的算法题 1.合并两个排序链表 2.树的子结构 3.二叉树的镜像 4.包含Min函数的栈 5.栈的压入.弹出 6.二叉搜索树的后序遍历 7.从上往下打 ...