How to use a webpack dynamic import with a variable query string?

Question

Using webpack 3 and react, I can import a file like this:

import(`src/Main.sass`).then(...do something)

I have a loader for the imported fi

Answer 1

I've just discovered this article, and it states that Webpack has "loading strategies".

At first I thought the comment in the example below was innocuous, but no, it's precisely what sets Webpack's loading strategy.

import(/* webpackMode: "eager" */ `assets/images/${imageName}.jpg`)

There are four different methods (lazy, lazy-once, eager, weak). You can take a look into the descriptions in more detail here.

All credits to the author of the article.

Use case

I needed to import a localized version of FirebaseUI in Quasar (a great Vue.js framework), so instead of using import, which fails with dynamic strings, forcing me to hardcode the language desired:

import * as firebaseui from 'firebaseui/dist/npm__it'

I now use:

import (/* webpackMode: "eager" */ `firebaseui/dist/npm__${appLanguage}`)

It allows me to evaluate the languate before the import statement, either by the detecting it in the browser, or by parsing the URL for the language query term.