基于 webpack 配置为 cli 参数动态导入模块答案

【问题标题】：dynamicly import modules based on webpack config or cli params基于 webpack 配置为 cli 参数动态导入模块
【发布时间】：2016-08-03 01:50:13
【问题描述】：

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

所以THEME_PATH 来自 import ./theme/{THEME_NAME}/indes.less

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

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

【问题讨论】：

【解决方案1】：

DefinePlugin 是可能的：

webpack 配置：

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

在你的代码中：

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

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

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

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

少文件：

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

webpack 配置（less-loader）：

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

【讨论】：

太棒了。这解决了我的问题。另外需要注意的是 require('./theme/' + THEME + '/index.less') 工作正常，但 import '../theme/' + THEME + '/index.less' 会失败
谢谢！ import 语法也可以吗？我在任何地方都使用import，并且必须在一个地方使用require。
你不能将import与变量一起使用，所以这是不可能的。