要在开发生产构建之间,消除 webpack.config.js 的差异。你可能需要环境变量。

可以使用 Node.js 模块的标准方式:在运行 webpack 时设置环境变量,并且使用 Node.js 的 process.env来引用变量。NODE_ENV 变量通常被视为事实标准(查看这里)。

webpack.config.js

module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin({
+ compress: process.env.NODE_ENV === 'production'
})
]
};

使用 cross-env 包来跨平台设置(cross-platform-set)环境变量:

package.json

{
"scripts": {
"build": "cross-env NODE_ENV=production PLATFORM=web webpack"
}
}

webpack 使用环境变量的更多相关文章

  1. webpack中环境变量的使用方法

    这节课讲解一下,在webpack打包过程中,怎么去使用一些环境变量. 首先我有一个打包配置的三个文件 "scripts": { "dev-build": &qu ...

  2. vue-cli如何添加多种环境变量

    vue-cli如何添加多种环境变量 目前webpack(vue-cli) 打包有两种变量,development, productor, 如何添加一个 test的测试环境呢 vue-cli 3.0 v ...

  3. Node 环境变量 process.env.NODE_ENV 之webpack应用

    转载来源:https://github.com/wfzong/NODE_ENV_TEST,这里还有源码可以学习,谢谢原作者的分享! 对于process.env.NODE_ENV困惑起因为在配置webp ...

  4. 在webpack中区分环境变量

    webpack 中的定义插件可以帮我们定义一些全局变量,使用方法如下: plugins: [ new webpack.DefinePlugin({ NODE_ENV: JSON.stringify(' ...

  5. webpack配置中环境变量-process.env. NODE_ENV

    背景 webpack有一特性就是可以让使用者灵活的在不同环境(开发环境,生产环境等)进行相应的特性的策略打包,比如: 是否使用反向代理使用接口,针对不同的静态资源(如图片等)是直接拷贝还是进行打包编译 ...

  6. 安装node配置环境变量,解决某组件(如cordova,webpack等)“不是内部命令”问题

    安装cordova之后,控制台输入cordova -v之后,一直提示不是内部命令,查了很久入了很多坑之后,终于配置正确~记录一下~ 1.安装node,我的安装路径为D:\frontend\nodejs ...

  7. 在package.json里面的script设置环境变量,区分开发及生产环境。注意mac与windows的设置方式不一样

    在package.json里面的script设置环境变量,区分开发及生产环境. 注意mac与windows的设置方式不一样. "scripts": { "publish- ...

  8. shell配置环境变量

    我们在使用Xshell开发机时往往会遇到一些问题,比如使用某些命令他会报command not found,,出现这种情况的原因是我们必须要配置一下环境变量,这样就可以在任何path中访问了. 这就需 ...

  9. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

随机推荐

  1. Study 7 —— CSS美化背景和边框

    图片透明度属性:opacity 背景图片重复属性:background-repeat背景图片位置属性:background-position background-postion:横坐标 纵坐标; b ...

  2. CodeBlock 快捷键大全

     一款开源的C/C++ IDE(集成开发环境),基于wxWidgets GUI体系,跨平台支持. 编辑器 快捷键 功能 Ctrl+Z 恢复上一次操作 Ctrl+Shift+Z 重复上一次操作 F1 ...

  3. python 的正则表达式指北

    正则表达式用来拆分字符串 >>> s = 'one1two2three3four4' >>> pattern = re.compile(r'\d+') >&g ...

  4. 浅谈分词算法(5)基于字的分词方法(bi-LSTM)

    目录 前言 目录 循环神经网络 基于LSTM的分词 Embedding 数据预处理 模型 如何添加用户词典 前言 很早便规划的浅谈分词算法,总共分为了五个部分,想聊聊自己在各种场景中使用到的分词方法做 ...

  5. HTML5的manifest 本地离线缓存

    下面直接放测试代码: index.html <!DOCTYPE html> <html manifest="m.manifest"> <head> ...

  6. The connection to adb is down, and a severe error has occured(Android模拟器端口被占用)

    相信不少同学和我一样遇到这个问题,有时候搞的还要重启电脑,那究竟是什么原因导致的呢,很明显,你的端口被占用了,那下面给出终极解决方案 一.首先描述症状,如下图 二.出现问题了,首先确定你的sdk目录是 ...

  7. HDU小小练

    hdu1253胜利大逃亡(bfs) 题意:就是城堡问题,找出可通行路径即可 思路:三维BFS,设定前后上下左右6个方向搜索,注意开始的时候人站的位置可以是墙. hdu1495非常可乐(bfs) 题意: ...

  8. 第16月第24天 find iconv sublime utf-8

    1. find . -type f -exec echo {} \; find src -type f -exec sh -c "iconv -f GB18030 -t UTF8 {} &g ...

  9. GCC编译过程与动态链接库和静态链接库

    1. 库的介绍 库是写好的现有的,成熟的,可以复用的代码.现实中每个程序都要依赖很多基础的底层库,不可能每个人的代码都从零开始,因此库的存在意义非同寻常. 本质上来说库是一种可执行代码的二进制形式,可 ...

  10. Python3学习笔记16-错误和异常

    使用try...except可以处理异常 异常处理 import sys try: print('try...') r = 10/0 print('result:',r) except ZeroDiv ...