要在开发生产构建之间,消除 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. JavaScript中的number跟string

    遇到问题困扰很久,因为这看起来木有问题,都是对的啊,殊不知是因为参数需要一个数字类型,但是数据却悄悄变成了字符类型.在群里求救无果最后自己找到了原因. 为什么我箭头里放数字可以正常显示,放temp[i ...

  2. .Net并行编程之同步机制

     一:Barrier(屏障同步) 二:spinLock(自旋锁) 信号量  一:CountdownEvent 虽然通过Task.WaitAll()方法也可以达到线程同步的目的. 但是Countdown ...

  3. QA系统Match-LSTM代码研读

    QA系统Match-LSTM代码研读 背景 在QA模型中,Match-LSTM是较早提出的,使用Prt-Net边界模型.本文是对阅读其实现代码的总结.主要思路是对照着论文和代码,对论文中模型的关键结构 ...

  4. DBeaver入门

    1 安装好连接好数据库,查询操作 注意黄色字体1 2 3 4 执行sql操作

  5. 列式数据库~clickhouse 场景以及安装

    一 简介:列式数据库clickhouse的安装与基本操作二 基本介绍:ClickHouse来自俄罗斯,是一款列式数据库三 适用场景: 简单类型的大数据统计四 限制     1 不支持更新操作,不支持事 ...

  6. windows cmd相关操作

    一:文件夹1. 新建文件夹方式一:md[盘符:\][路径\]新目录例如:md c:\test\newtest 方式二:先使用cmd进入需要新建文件的根目录下,使用md或者mkdir 直接创建文件夹ne ...

  7. 在ASP.NET Web Forms中用System.Web.Optimization取代SquishIt

    将一个ASP.NET Web Forms项目从.NET Framework 4.0升级至.NET Framework 4.5之后,发现SquishIt竟然引发了HTTP Error 500.0 - I ...

  8. 【转】Python中的eval()、exec()及其相关函数

    [转]Python中的eval().exec()及其相关函数 刚好前些天有人提到eval()与exec()这两个函数,所以就翻了下Python的文档.这里就来简单说一下这两个函数以及与它们相关的几个函 ...

  9. 文件&报表状态ID

    def_filestatus Uploading=4 WaitingParse=6 Parsing=10 Completed=14 ParseError=1006 UploadError=1004 d ...

  10. python标准库之secrets

    secrets secrets是python3.6加入到标准库的,使用secrets模块,可以生成适用于处理机密信息(如密码,帐户身份验证,安全令牌)的加密强随机数. 导入 import secret ...