理解webpack中的process.env.NODE_ENV

Posted 天使猫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了理解webpack中的process.env.NODE_ENV相关的知识,希望对你有一定的参考价值。

参考资料

一. process

要理解 process.env.NODE_ENV 就必须要了解 process,process 是 node 的全局变量,并且 process 有 env 这个属性,但是没有 NODE_ENV 这个属性。大家可以创建一个 js (比如index.js)文件,然后打印 process(console.log(process)),在 node 环境下运行 node index.js,就可以看到 process 里面所有的内容(可以看到里面有 env 这个属性)。

二. process.env.NODE_ENV 的作用

  1. 这个变量并不是 process.env 直接就有的,而是通过设置得到的。
  2. 这个变量的作用是:我们可以通过判断这个变量区分开发环境或生产环境。

三. 如何设置 process.env.NODE_ENV

  1. 上面是 webpack 官网的原话,当我们设置 mode 为 development 或者 production时,webpack
    会自动的进行一些设置(当然设置了模式以后,webpack会自动的为项目添加一些插件)

    mode: development --> process.env.NODE_ENV = development
    mode: production --> process.env.NODE_ENV = production
    默认情况下 --> process.env.NODE_ENV = production

  2. 采用mode的方式完全可以满足我们的要求,当然webpack3或者以下的同学,就需要通过通过 webpack 自带的一个插件 DefinePlugin 完成设置工作,采用这种方式设置的时候,值对应的格式必须是"\'env\'"这种格式,所以会用 JSON.stringify 进行转换。

    plugins: [
        new webpack.DefinePlugin({
          "process.env.NODE_ENV": JSON.stringify(\'env\')
        }),
      ]
    
  3. 如果设置的值不是 development 或者 production,就会出现上面图中的最后一个方框的情况,不会自动设置mode,它就会在打包或者本地启动的时候进行提示,叫你设置对应的模式。

  4. 将 process.env.NODE_ENV 与启动命令行结合起来


    当我们这么操作的时候,就相当于将 process.env.NODE_ENV 的值与启动命令行结合了起来,这里可以看到我们用到了 cross-env ,这是一个能跨平台地设置及使用环境变量的工具,如果没有它,无法进行 NODE_ENV=hahaha 这样的操作,当然 cross-env 也必须直接放到它的前面。(通过下面的命令进行安装)

    npm install cross-env --save-dev
    
  5. 这儿有必要说一下,上面通过 JSON.stringify(process.env.NODE_ENV) 进行赋值操作,并不意味着可以在不使用 webpack.DefinePlugin 定义 process.env.NODE_ENV 前直接就可以将它拿来使用,如果我们在没有使用 webpack.DefinePlugin 的情况下,打印 JSON.stringify(process.env.NODE_ENV),还是会打印出我们熟悉的默认值 production。

  6. 所以我们这儿一定要记住,如果没有直接设置mode,或者通过 webpack.DefinePlugin 定义的 process.env.NODE_ENV,那么 process.env.NODE_ENV 的值就是默认的 production。如果要想scripts 里面的设置起作用,那么就必须通过上面4中的设置进行。

以上是关于理解webpack中的process.env.NODE_ENV的主要内容,如果未能解决你的问题,请参考以下文章

Webpack2 不理解我的 SASS 文件中的 @import 语句(如何使用 webpack2 编译 SASS?)

如何理解webpack中的js文件的打包

理解webpack中的process.env.NODE_ENV

webpack中的 chunk,module,bundle的区别

webpack中的 chunk,module,bundle的区别

webpack 中的异步块是啥?