How can I have different file for development and deployment using webpack?

Question

I have some config files which basically stores some data. However, I am using different data for development and deployment.

I don't want to manually change the file whenever I try to deploy it. Nor do I want to change the import statement before deployment.

for example. I have some code

import './config/data.js'

I don't want to modify this. I only want the content of data.js to change between development and deployment.

How can I setup webpack to achieve this?

score 0 · Answer 1 · answered Jul 04 '16 at 05:36

The way I am achieving this is to have different version of this file like dev.js, stag.js, prod.js and etc.

Then I tell webpack to copy the right file and rename it to config.js using the CopyPlugin

 var argv = require('yargs').argv;
 var ENV = argv.env;

 new CopyPlugin([
    {
        from: path.join(__dirname, 'config/properties/' + ENV + '.js'),
        to: '<path-to-config-file>/config.js'
    }
];

Then I run webpack --env=dev and webpack does all the magic.

How can I have different file for development and deployment using webpack?

1 Answers1