动态导入基于webpack config或cli params的模块

Question

我正在寻找一个解决方案，根据webpack配置中的参数动态导入JS中的模块。

从THEME_PATH开始 import ./theme/{THEME_NAME}/indes.less

将通过webpack构建中的webpack参数或CLI参数动态替换。

有关如何解决此问题的任何建议或提示？

Answer 1

可以使用DefinePlugin：

webpack config：

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

并在您的代码中：

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

您可以传递THEME in this way（取决于您的操作系统和shell）。

此外，您可以从cli传递参数，而不是使用process.env。

如果您在较少的文件中导入主题，而不是js：

减去文件：

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

webpack config（less-loader）：

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