Use webpack to use specific file based on node environment

Question

I'm working on a Vue app (using cli 3). A third party front end component requires a config file. I would like to use different files depending on my node env but am unclear how to do this. For example, my directory structure might have tree.production.js and tree.development.js. In my main javascript, I can't seem to specify

import {tree} from `./assets/tree.${process.env.NODE_ENV}.js`;

I also can't use .env files to specify

import {tree} from `./assets/tree.${process.env.VUE_APP_TREE}.js`;

What I'd like to try is utilize webpack a la the vue.config.js to use the correct file and rename it to tree.js so in my code I can just specify

import {tree} from "./assets/tree.js"

Or really any best practices on how to achieve this pretty mundane and seemingly routine dev/prod switch.

Something like

//vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // do something with tree.production.js...
    } else {
      // do something with tree.development.js
    }
  }
}

Answer 1

The root of your problem is that ES6 import (and export) are statically analyzed - meaning, you can't have dynamic values like you are trying. You can try dynamic imports using the import().then(module => ...) syntax, but that's not really what you need here.

I think you are looking for resolve.alias. It would look something like this in your webpack config:

  //...
  resolve: {
    alias: {
      'assets/tree': path.resolve(__dirname, `path/to/assets/tree.${process.env.NODE_ENV}.js`)
    }
  }

and inside your app you would import it like this:

import { tree } from 'assets/tree';