webpack 环境变量

webpack配置相关打包参数

简单配置–针对打包环境配置

方法一：在package.json中的 scripts 添加一条新的 环境参数

scripts:{
  'build':"webpack",
  'build:mini':"set MINIFY=1 && webpack"// window系统
  'build:minimac':"export MINIFY=1 && webpack"// mac系统
}

在webpack.config.js中打印 process.env.MINIFY ，build—>undefind; build:mini—>1

方法二：使用第三方插件 cross-env
cross-env 是一个跨平台设置环境变量的第三方包,可以统一在多平台设置环境变量，兼容多平台

npm run cross-env --save-dev

scripts:{
  "build:mini": "cross-env MINIFY=2 webpack"
}

运行结果之后值为2
注意 二者的区别是后面的 && 的连接符 set/export 后面命令需要&& 拼接，cross-env 不需要

方法三：当webpack 配置为 导出函数时，参数 env 可以接受自定义的任何变量和内置的一些环境变量
（https://webpack.docschina.org/guides/environment-variables/）

npx webpack --env mytest=soso --env production

在webpack.config.js 导出函数外部中打印process.env.mytest—>undefind,在导出函数 env参数 env.mytest---->soso

插件配置—针对普通js获取全局变量

在说插件配置的前，需要注意一点事情：
简单配置中的这些方法 是运行在nodejs中的，在普通js 中是没有办法获取这些变量的，要想在本地js代码中使用，需要
使用 DefinePlugin 插件配置环境变量，该插件为webpack自带，使用时需要引入webpack
在代码中 打印 process.env.NODE_ENV=“production”|“development”,这是因为在 DefinePlugin已经定义了
（https://webpack.docschina.org/plugins/define-plugin/）

const webpack = require('webpack')
new webpack.DefinePlugin({
  // 定义...
});

例如：

new webpack.DefinePlugin({
  MY_TEST:JSON.stringify('mytest')
});

在不同main.js中打印 console.log(‘MY_TEST:’,MY_TEST)---->MY_TEST:mytest

注意：DefinePlugin只是针对的普通js 全局变量并不会在webpack.config.js中打印出来，如果根据不同打包环境，代码中执行不停的操作需要二者结合
在这之前先 说一下 mode模式（https://webpack.docschina.org/configuration/mode#root）
–mode development 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development
–mode production 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production
指定运行模式常用的有 两种方法

// 方法一：

module.exports = {
  mode: 'development',
};

// 方法二：在cli中
webpack --mode=development

在 webpack自带的命令中 npx webpck—>production, npx webpack serve—>development

不常用的命令 --node-env
如果你不明确的设置 mode，mode 选项的值会被 --node-env 覆盖。例如 --node-env production 时，会把 process.env.NODE_ENV 和 mode 均设置为 ‘production’

npx webpack --node-env production

在普通js 中打印 console.log(‘env:’,process.env.NODE_ENV)–>env:production

下面展示简单配置和插件配置二者结合的配置
1.新建env.js文件，新增config 文件–>config/env.js

const env = process.env.NODE_ENV

function getUrl(env){
  let url='不知道'
  switch(env){
    case 'development':
      url="https://www.baidu.com/"
      break
    case 'production':
      url="https://www.sina.com.cn/"
      break
  }
  return url
}

module.exports= getUrl(env)

webpack.config.js 中

const envURl =require("./config/env.js")
new webpack.DefinePlugin({
  MY_URL:JSON.stringify(envURl)
})

package.json中

scripts:{
 "start": "cross-env NODE_ENV=development webpack serve --open",
}

运行 npm run start,在普通main.js中答应console.log(‘MY_URL’,MY_URL)—>MY_URL:https://www.baidu.com/