深入理解webpack process.env.NODE_ENV配置

在node中,有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量,在webpack中它的用途是判断生产环境或开发环境的依据的。

为了查看 process的基本信息,我们可以在文件夹中 新建一个 process.js 文件,在里面加一句代码:console.log(process);然后进入该文件夹,执行 node process.js 可以在命令行中打印如下信息:

$ node process.js
process {
 title: 'node',
 version: 'v4.4.4',
 moduleLoadList:
  [....],
 versions:
  { http_parser: '2.5.2',
   node: '4.4.4',
   v8: '4.5.103.35',
   uv: '1.8.0',
   zlib: '1.2.8',
   ares: '1.10.1-DEV',
   icu: '56.1',
   modules: '46',
   openssl: '1.0.2h' },
 arch: 'x64',
 platform: 'darwin',
 release:
  { name: 'node',
   lts: 'Argon',
   sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz',
   headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' },
 argv:
  [ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
   '/Users/tugenhua/个人demo/process.js' ],
 execArgv: [],
 env:
  { TERM_PROGRAM: 'Apple_Terminal',
   SHELL: '/bin/zsh',
   TERM: 'xterm-256color',
   TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/',
   Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render',
   TERM_PROGRAM_VERSION: '404',
   TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9',
   USER: 'tugenhua',
   SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners',
   PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',
   PWD: '/Users/tugenhua/个人demo',
   LANG: 'zh_CN.UTF-8',
   XPC_FLAGS: '0x0',
   XPC_SERVICE_NAME: '0',
   SHLVL: '1',
   HOME: '/Users/tugenhua',
   LOGNAME: 'tugenhua',
   SECURITYSESSIONID: '186a8',
   OLDPWD: '/Users/tugenhua/工作文档/sns_pc',
   ZSH: '/Users/tugenhua/.oh-my-zsh',
   PAGER: 'less',
   LESS: '-R',
   LC_CTYPE: 'zh_CN.UTF-8',
   LSCOLORS: 'Gxfxcxdxbxegedabagacad',
   NVM_DIR: '/Users/tugenhua/.nvm',
   NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',
   NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist',
   NVM_RC_VERSION: '',
   MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',
   NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node',
   NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin',
   _: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
   __CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' },
 pid: 14034,
 features:
  { debug: false,
   uv: true,
   ipv6: true,
   tls_npn: true,
   tls_sni: true,
   tls_ocsp: true,
   tls: true },
 _needImmediateCallback: false,
 config: {},
 nextTick: [Function: nextTick],
 _tickCallback: [Function: _tickCallback],
 _tickDomainCallback: [Function: _tickDomainCallback],
 stdout: [Getter],
 stderr: [Getter],
 stdin: [Getter],
 openStdin: [Function],
 exit: [Function],
 kill: [Function],
 mainModule:
  Module {
   id: '.',
   exports: {},
   parent: null,
   filename: '/Users/tugenhua/个人demo/process.js',
   loaded: false,
   children: [],
   paths:
   [ '/Users/tugenhua/个人demo/node_modules',
    '/Users/tugenhua/node_modules',
    '/Users/node_modules',
    '/node_modules' ] } }

如上就可以看到 process是node的全局变量,并且process有env这个属性,但是没有NODE_ENV这个属性。

process.env 属性返回的是一个包含用户环境信息的对象,它可以区分开发环境或正式环境的依据,那么我们如何配置环境变量呢?

一. 如何配置环境变量:

直接在cmd环境配置即可,查看环境变量,添加环境变量,删除环境变量等操作。

1.1 windows环境配置如下:

#node中常用的到的环境变量是NODE_ENV,首先查看是否存在
set NODE_ENV 

#如果不存在则添加环境变量
set NODE_ENV=production 

#环境变量追加值 set 变量名=%变量名%;变量内容
set path=%path%;C:\web;C:\Tools 

#某些时候需要删除环境变量
set NODE_ENV=

1.2 Linux配置(mac系统环境也属于这个)

#node中常用的到的环境变量是NODE_ENV,首先查看是否存在
echo $NODE_ENV

#如果不存在则添加环境变量
export NODE_ENV=production

#环境变量追加值
export path=$path:/home/download:/usr/local/

#某些时候需要删除环境变量
unset NODE_ENV

#某些时候需要显示所有的环境变量
env

如下查看环境变量,添加环境变量,删除环境变量操作如下:

显示所有的环境变量,如下图所示

注意:如果我们在命令行中设置环境变量后,比如设置 production 后,如下设置:
export NODE_ENV=production ,那么会在所有的项目下都是正式环境,当我们使用命令 npm install 后下载依赖包时,只会把 package.json中的dependencies依赖项下载下来,对于devDependencies中的依赖包是下载不下来的。
因此我们需要使用上面的命令 unset NODE_ENV 删除刚刚设置的环境变量。

二:理解 DefinePlugin 含义

官网(https://webpack.js.org/plugins/define-plugin/)

官网解释的是:DefinePlugin允许我们创建全局变量,可以在编译时进行设置,因此我们可以使用该属性来设置全局变量来区分开发环境和正式环境。这就是 DefinePlugin的基本功能。

因此我们可以在webpack.config.js 中添加如下代码配置全局变量信息了,因为当webpack进行编译的时候会全局设置变量;如下代码:

module.exports = {
 plugins: [
  // 设置环境变量信息
  new webpack.DefinePlugin({
   PRODUCTION: JSON.stringify(true),
   VERSION: JSON.stringify('5fa3b9'),
   BROWSER_SUPPORTS_HTML5: true,
   TWO: '1+1',
   'typeof window': JSON.stringify('object'),
   'process.env': {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV)
   }
  })
 ]
}

package.json 打包配置如下命令:

"scripts": {
 "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
 "build": "webpack --progress --colors --devtool cheap-module-source-map",
 "build:dll": "webpack --config webpack.dll.config.js"
},

这样配置完成后,为了验证一下是否是全局变量,运行npm run dev 打包后,我们可以在我们项目中入口js文件,打印下即可:比如如下代码:

console.log('Running App version ' + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印 { NODE_ENV: undefined }

如上信息可以看到 process.env.NODE_ENV 打印出为undefined,那是因为我们在 package.json文件中未进行配置。下面我们把package.json 加上 NODE_ENV变量值,代码打包命令变成如下:

"scripts": {
 "dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
 "build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
 "build:dll": "webpack --config webpack.dll.config.js"
},

如上打包命令,在dev打包命令上,前面加上了 NODE_ENV=development 命令,在build打包命令上前面加上了 NODE_ENV=production,因此继续查看代码结果变为如下:

console.log('Running App version ' + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印 { NODE_ENV: 'development' }

可以看到这个时候 process.env.NODE_ENV 才有值,因此在项目打包中,为了区分开发环境和正式环境我们像如上配置即可,然后在webpack.config.js中通过 process.env.NODE_ENV 这个来区分正式环境还是开发环境即可。

三:理解 cross-env

1. 什么是cross-env呢?
它是运行跨平台设置和使用环境变量的脚本。

2. 它的作用是啥?

当我们使用 NODE_ENV = production 来设置环境变量的时候,大多数windows命令会提示将会阻塞或者异常,或者,windows不支持NODE_ENV=development的这样的设置方式,会报错。因此 cross-env 出现了。我们就可以使用 cross-env命令,这样我们就不必担心平台设置或使用环境变量了。也就是说 cross-env 能够提供一个设置环境变量的scripts,这样我们就能够以unix方式设置环境变量,然而在windows上也能够兼容的。

要使用该命令的话,我们首先需要在我们的项目中进行安装该命令,安装方式如下:

npm install --save-dev cross-env

然后在package.json中的scripts命令如下如下:

"scripts": {
 "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
 "build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
 "build:dll": "webpack --config webpack.dll.config.js"
}

以上就是深入理解webpack process.env.NODE_ENV配置的详细内容,更多关于webpack process.env.NODE_ENV配置的资料请关注我们其它相关文章!

时间: 2020-02-22

深入理解Webpack 中路径的配置

前言 Webpack2 中有很多涉及路径参数配置,若不知其所以然,很容易混淆出错.本文尽可能的汇集了 Webpack2 中涉及路径的配置,力争深入浅出. context context 是 webpack 编译时的基础目录,入口起点(entry)会相对于此目录查找. 默认值为当前目录,webpack设置 context 默认值代码 可以本地下载: this.set("context", process.cwd()); process.cwd()即webpack运行所在的目录(等同pac

webpack配置导致字体图标无法显示的解决方法

问题:在项目开发时使用字体图标,报错如下: 所有的字体图标都不能正常显示了,报错提示不能解码字体. 解决问题:找了很久,最后发现是在webpack配置的时候自己手动添加了下面的代码而引起的错误:在 webpack.base.conf.js文件中删除 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }, 总结: 其实采用vue-cli 自动生成的配置文件已经完成了字体图标文件的编译,自己写的和自动生成的产生冲

webpack常用配置项配置文件介绍

一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack a.在全局中安装webpack:npm install webpack -g b.将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install w

5分钟打造简易高效的webpack常用配置

webpack给前端开发带来了毋庸置疑的改变,它把JS,图片,css都作为模块处理,同时具有开发便捷,自动化,兼容AMD写法等等诸多无须赘述的优点,更令人称道的是其插件社区非常强大,对于不同的业务需求和技术需求社区都有大量插件可供使用. 凡事都具有两面性,许多人说:前端开发再也不能只需新建HTML文件和JS文件就可以开始写代码了.webpack带来了更高级更规范的前端开发模式,由于其本身也在不断完善中,从1到2再到发布不久的webpack3,频繁的修改给新手带来了许多困惑.而且网络上各种教程鱼目

webpack多入口文件页面打包配置详解

大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也不尽是如此,有时候也会碰到多页面的项目,而且以我的经验来看,这种情况出现的频率还不低,例如项目比较大,无法进行全局的把握,或者项目需要多次的更新迭代等,都适合做成多页面程序,这就涉及到了 webpack的多页面文件的打包配置问题. 手动配置 单页应用程序和多页应用程序的 webpack配置文件其实绝大部分都还是相同的,只不过多页的配置需要在单页配置的基础上顾及到多个页面罢了,loader.ou

webpack引入eslint配置详解

webpack中eslint使用 首先,要使webpack支持eslint,就要要安装 eslint-loader ,命令如下: npm install --save-dev eslint-loader 在 webpack.config.js 中添加如下代码: { test: /\.js$/, loader: 'eslint-loader', enforce: "pre", include: [path.resolve(__dirname, 'src')], // 指定检查的目录 op

webpack配置sass模块的加载的方法

webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置.这里不讲webpack的入门,入门的文章,我推荐这篇<webpack入门>. 为了使用sass,我们需要安装sass的依赖包 //在项目下,运行下列命令行 npm install --save-dev sass-loader //因为sass-loader依赖于node-sass,所以还要安装node-sass npm install --save-dev node-sass 当然了,使用样式的话,css-lo

webpack构建vue项目的详细教程(配置篇)

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

webpack配置打包后图片路径出错的解决

问题 项目在开发环境下工作正常,当打包后图片不见了,检查元素后发现路径出错了. 图片路径是这样:background: url(/static/img/bg_camera_tip.bd37151.png),但该路径下文件并不存在. 打包后文件目录如下: 可以看到背景图片的路径应该是../../static而实际却是/static,找到原因后就好解决了 方法一 查看build目录下webpack.base.conf.js的配置,图片文件会经过url-loader处理. module: { rule

webpack教程之webpack.config.js配置文件

首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugin --save-dev 在项目app目录下建立component.js文件,写入如下代码 export default (text='hello world')=>{ const element=document.createElement('div'); element.innerHTML=te

详解webpack之scss和postcss-loader的配置

本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **

详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

详解webpack的clean-webpack-plugin插件报错

1.出错代码 const path = require('path') const CleanWebpackPlugin = require('clean-webpack-plugin') // const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './input.js', output: { path: path.resolve(__dirname, 'dist'),

详解webpack babel的配置

Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用 首先

详解webpack 打包文件体积过大解决方案(code splitting)

优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件

详解webpack 入门与解析

每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但

详解webpack的文件监听实现(热更新)

前言 文件监听是在源码发生变化时,自动重新构建出新的输出文件. webpack 开启监听模式,有两种方式: 1.启动 webpack 命令时,带上 --watch 参数.  唯一缺点:需要手动刷新才能看到变化: 2.在配置 webpack.config.js 中设置 watch: true.  优点: (1) WDS 不刷新浏览器 (2) WDS 不输出文件,⽽是放在内存中 (3) 使⽤用 HotModuleReplacementPlugin 插件 1 第一种方式, --watch 1.1 配置

详解Django模版中加载静态文件配置方法

1.settings.INSTALLED_APPS下添加:django.contrib.staticfiles 2.settings.py下添加:STATIC_URL = '/static/' 3. (1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置) 在模板中这样调用: {% load static %} <img src="{% static 'front/logo.jpg

详解mysql8.018在linux上安装与配置过程

windows下安装介绍:去看看–>mysql8.018在windows下安装介绍 Linux平台: 以下操作以mysql 8.0.18,系统为Ubuntu 16.04.6 LTS (GNU/Linux 4.4.0-142-generic x86_64)为例: A. 自动安装 sudo apt-get install mysql-server sudo apt-get install mysql-client sudo apt-get install libmysqlclient-dev B.

详解ubuntu20.04下CLion2020.1.3安装配置ROS过程说明

一 下载安装激活CLion 按照网上给的教程就可以 二 配置ROS 1.配置CLion的启动方式 在主目录打开隐藏文件.bashrc,命令是:sudo gedit ~/.bashrc 将CLion的启动文件clion.sh的路径设置为环境变量 PATH 这样在终端里,无论在哪个工作目录下都可以输入clion.sh即可启动CLion. 设置的代码是: export PATH=/home/zyw/CLionPack/clion-2020.1.3/bin:$PATH 这个路径是安装CLion的路径,不