NODE_ENV 环境变量使用以及正确设置

本文只讲如何正确的设置NODE_ENV node环境变量,

NODE_ENV是啥?

技术上讲， NODE_ENV是一个由 Node.js 暴露给执行脚本的系统环境变量。
通常用于确定在开发环境还是生产环境(dev-vs-prod)下，服务器工具、构建脚本和客户端 library 的行为。

有什么用?

在工作中，根据开发环境不同，设置不同的变量、参数、和引入依赖，使打包更加的自动化，一劳永逸
借助于 process.env.NODE_ENV 可以使我们区分开发环境

在进行webpack 环境分离配置的时候, 虽说有 `webpack-merge` 来帮我们区分开两个js配置文件但是还是不足够,

比如在那些地方呢??? 我遇到了以下问题

处理 Css 的loader

我们需要对 css 进行抽离,但是抽离css的插件 MiniCssExtractPlugin 有一个bug,开发时必须替换成style-loader,否则会导致修改css页面不更新,

生产环境 prod.config.js
module: {
     rules: [
         {
             test: /\.css$/,
             use: [
                MiniCssExtractPlugin.loader,  //   生产环境 的loader
                 // MinicssExtractplugin只适合打包,开发时候会导致HMR确实,没办法及时更新页面
                 get_css_Loader(),
                 'postcss-loader'
             ]
         },
     ]
}
开发环境 dev.config.js
module: {
     rules: [
         {
             test: /\.css$/,
             use: [
                style-loader,  //开发环境需要style-loader
                 get_css_Loader(),
                 'postcss-loader'
             ]
         },
     ]
}

可以看到上面代码只有一行代码不同而已,所以没必要写在两个js文件里面,可以写在base.config.js里面,
这时候就需要借助判断环境再进行生成对应loader就行啦

注意: 一定要先设置 NODE_ENV的值,对,这个值是需要自己手动进行修改的(至少在我学习的时候是)

如何设置NODE_ENV?

借助一个包
输入 npm i cross-env --save-dev

安装完 cross-env ,

在package.json修改一下脚本

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js ",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.dev.js "
  },

cross-env NODE_ENV=production 以及 cross-env NODE_ENV=development 是重点
上面script 脚本的意思是让 cross-env 把 NODE_ENV 设置为 production (任意) ,再让 webpack 运行指定文件
经过以上就可以用 NODE_ENV 了

接下来封装个函数 (判断NODE_ENV环境)

const MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽取css的插件
module.exports = {
     getCssExtractLoader(){
      //判断是否是生产环境
        return process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader'
    },
}

这样之后我们就直接在base公共文件配置中.

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    getCssExtractLoader(), //这样就用两个地方都写同样代码了
                    get_css_Loader(),
                    'postcss-loader'
                ]
            },
        ]
}

这样就省去了好几行代码, 这就是使用NODE_ENV的好处,