为webpack build分离dev和prod配置文件

Question

I'm developing a single page application with vuejs and using webpack to package my app. I have to two config file those config.dev.js and config.prod.js

config.dev.js

{
  "api-url":"http://10.0.0.50:8080"
}

config.prod.js

{
  "api-url":"https://api.myproduction.com"
}

I only want to include config.dev.js and exclude config.prod.js for the development environment package. Alike only include config.prod.js and exclude config.dev.js for the production environment package. How can I do this?

Answer 1

You can do that by either having one file that returns this setting depending on NODE_ENV :

config.js

module.exports = process.env.NODE_ENV === 'production'
  ? require('./config.prod.js')
  : require('./config.dev.js')

Then in your code you just require config.js and it will do the trick. Remember that for this to work you need to run webpack in production mode: either with the flag webpack -p or setting NODE_ENV=production webpack .

I also would recommend using this in combination with DefinePlugin https://webpack.js.org/plugins/define-plugin/#components/sidebar/sidebar.jsx