How to dynamically change import paths in webpack?

Question

I have a set of exports that I normally import from one directory:

import { myThing } from 'path/to/dir/es5/things'

However, if I run webpack with a specific NODE_ENV set, I would like the root of all such imports to be treated as es6 instead:

import { myThing } from 'path/to/dir/es6/things'

How can I do this, e.g. have webpack dynamically resolve path/to/dir/es5/* to path/to/dir/es6/*?

Answer 1

You can use an alias for that.

For example, in your webpack configuration, you can use something like:

const alias = {};
if (NODE_ENV === ...) {
    alias['path/to/dir/es5'] = 'path/to/dir/es6'
}

Further reading: https://webpack.js.org/configuration/resolve/

Answer 2

Here is my way of handling this stuff.

Built-in DefinePlugin coupled with env variable.

in your package.json, add env variable in following way

"script": "... webpack --env.SOME_ENV_VAR=value -p"

Then, add your DefinePlugin inside your webpack.config file

plugins: [
    ...

    new webpack.DefinePlugin({
        SOME_ENV_VAR: env.SOME_ENV_VAR,
    }),

    ...
]

Then you can use SOME_ENV_VAR as global variable inside your code

/* global SOME_ENV_VAR */    

const esX = SOME_ENV_VAR === value ? 'es5' : 'es6';

myThing = require(`path/to/dir/${esX}/things`)