CODEWITHSUNDEEP
javascriptreactjsimportwebpack
Dilemmat_Dag
Dilemmat_Dag

Reputation: 463

dynamicly import modules based on webpack config or cli params

I'm looking for a solution to dynamically import modules in JS react components based on parameters from a webpack configuration.

So that THEME_PATH from import ./theme/{THEME_NAME}/indes.less

Would be dynamically replaced through a webpack param or CLI parameters on webpack build.

Any suggestions or hints on how to solve this?

Upvotes: 3

Views: 510

Answers (1)

Bob Sponge
Bob Sponge

Reputation: 4738

It is possible with DefinePlugin:

webpack config:

   plugins: [
        ...
        new webpack.DefinePlugin({
            __THEME__: '"' + process.env.THEME.toString() + '"'
        })
    ]

and in your code:

require('./theme/' + __THEME__ + '/index.less')

You can pass THEME in this way (depends on your OS and shell).

Also you can pass prameters from cli instead of using process.env.

If you importing theme in less file, not js:

less file:

@import "theme/@{THEME}/index.less";

webpack config (less-loader):

'!less?{"modifyVars":{"THEME":"' + process.env.THEME + '"}}'

Upvotes: 4

Related Questions