javascript - 基于 webpack 配置为 cli 参数动态导入模块

Question

我正在寻找一种解决方案，以根据来自 webpack 配置的参数在 JS react 组件中动态导入模块。

这样 THEME_PATH 来自导入 ./theme/{THEME_NAME}/indes.less

将在 webpack 构建时通过 webpack 参数或 CLI 参数动态替换。

关于如何解决这个问题的任何建议或提示？

Answer 1

可以用 DefinePlugin :

webpack 配置:

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

并在您的代码中:

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

你可以通过主题 in this way (取决于您的操作系统和外壳)。

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

---

如果你在 less 文件中导入主题，而不是 js:

少文件:

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

webpack 配置(less-loader):

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