webpack中的一个疑惑

Question

我不明白的是'"production"'，外边要分别加单引号 双引号。下边说的string variables need to be wrapped into single and double quotes '"..."'，什么是字符串变量？

// config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  DEBUG_MODE: false,
  API_KEY: '"..."' // this is shared between all environments
}

// config/dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  DEBUG_MODE: true // this overrides the DEBUG_MODE value of prod.env
})

// config/test.env.js
module.exports = merge(devEnv, {
  NODE_ENV: '"testing"'
})

Note: string variables need to be wrapped into single and double quotes '"..."'

Answer 1

这个不是 webpack 要求的，是 webpack.definePlugin 要求的。后者会把你代码里的变量替换成指定的内容，用来输出特定环境要求的代码。

想象一下，你的代码会发布两个版本，一个是试用版，一个是正式版。试用版中到达一定条件后会中断执行，你就可以这样做：

if (IS_TRIAL) {
  alert('这是试用版');
  return;
}

然后在变量配置中定义

module.exports = {
  IS_TRIAL: true;
}

打包编译后的代码就变成了

if (true) {
  //...
}

那么，如果变量是个字符串，比如：if (VERSION === 'trial')，但是你不加引号，就变成了 if (trial === 'trial')，这时 JS 会认为前面一个是变量，就会导致一些奇怪的问题。