要在开发生产构建之间,消除 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. HDU - 3006 The Number of set(状态压缩位运算)

    http://acm.hdu.edu.cn/showproblem.php?pid=3006 题意 给定n个集合,每个集合都是由大于等于1小于等于m的数字组成,m最大为14.问由给出的集合可以组成多少 ...

  2. Parent Proxy 和 Origin Server配置学习

    Parent Proxy Configuration proxy.config.http.parent_proxy_routing_enable 开启/关闭parent caching: proxy. ...

  3. Bulma - 基于 Flexbox 的现代化的 CSS 框架

    Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,设计的初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复制的内容布局,浏览器支持:浏览器支持:C ...

  4. [JXOI2018]游戏 (线性筛,数论)

    [JXOI2018]游戏 \(solution:\) 这一道题的原版题面实在太负能量了,所以用了修改版题面. 这道题只要仔细读题,我们就可以将题目的一些基本性质分析出来:首先我们定义:对于某一类都可以 ...

  5. configure编译选项

    1.rpath与rpath-link的区别 参考链接:http://blog.csdn.net/xph23/article/details/38157491 rpath 是 运行时候链接的库, rpa ...

  6. String split方法与Guava Splitter用法区别

    String split方法与Guava Splitter用法区别 今天同事写了一段使用String split方法的代码,如下所示,同事期望得到的是字符"1",但是没想到却得到空 ...

  7. Node.js的基本操作(使用Vue前必学)

    安装 Windows下不需要讲,Mac下的安装步骤: https://www.cnblogs.com/bobi1234/category/1367458.html 全局安装淘宝镜像 npm insta ...

  8. tidb 架构 ~Tidb学习系列(4)

    一 简介:今天我们继续学习tidb 二 集群管理 0 集群配置       验证 4台一组 3个kv 一个pd+server       上线 6台一组   1 动态添加kv服务       nohu ...

  9. mysql 查询优化案例汇总

    一 简介:此文章为经历过的sql案例集合和相关思路 二 案例1: 现象: 测试环境出现select语句,join2张表多次join,explain结果如下 出现 using where,using j ...

  10. Python 爬虫学习

    #coding:utf-8 #author:Blood_Zero ''' 1.获取网页信息 2.解决编码问题,通过charset库(默认不安装这个库文件) ''' import urllib impo ...