process.env.NODE_ENV

最新推荐文章于 2024-10-03 17:39:40 发布

sendudu

最新推荐文章于 2024-10-03 17:39:40 发布

阅读量1.1k

点赞数

分类专栏：日常学习文章标签： vue.js webpack

本文链接：https://blog.csdn.net/sendudu/article/details/108556282

版权

日常学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

process.env

process对象用于处理与当前进程相关的事情，它是一个全局对象，可以在任何地方直接访问到它而无需引入额外模块。它是 EventEmitter 的一个实例。

process.env 获取当前系统环境信息的对象，常规可以用来进一步获取环境变量、用户名等系统信息：

console.log(process.env);
console.log('username: ' + process.env.USERNAME);
console.log('PATH: ' + process.env.PATH);

webpack 开发和生产的区别

开发环境(development)和生产环境(production)的构建目标差异很大。

在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。

而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。

由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

分别为

webpack.config.js

webpack.dev.js

webpack.production.js

如何区分生产环境还是开发环境

引入process.env，这样就可以在业务代码中靠process.env.NODE_ENV来判断.

在webpack.base.config.js区分process.env.NODE_ENV来决定设置webpack配置为开发还是生产.

// webpack.base.config.js
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

process.env.NODE_ENV如何设置

因为process是nodejs全局变量,可以通过命令行设置

export NODE_ENV = production && webpack

export NODE_ENV = dev && webpack

也可以通过package.json设置

{
  "scripts": {
    "dev": "export NODE_ENV=dev&&webpack  --progress --colors",
    "production": "export NODE_ENV=production&&webpack  --progress --colors",
  },

也可以借助webpack.DefinePlugin插件,在代码里面设置,如

    //webpack.dev.js
 plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),

 //config/index.js
 dev: {
     env: require('./dev.env'),
     port: 8080,

//config/dev.env.js
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

但是在build.js中 process.env.NODE_ENV = ‘production’ ,不知道这个和webpack.prod.js里面的有什么区别.