如何使用带有变量查询字符串的webpack动态导入？

Question

使用webpack 3并做出反应,我可以导入这样的文件:

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

我有一个导入文件的加载器,它根据查询字符串更改模块内容,我可以成功导入这样的文件:

import(`src/Main.sass?theme=themename`).then(...do something)

但是当查询字符串是变量时:

const themeQuery = '?theme=themename';
import(`src/Main.sass${themeQuery}`).then(...do something);

要么

const theme = 'themename';
import(`src/Main.sass?theme=${theme}`).then(...do something);

我收到错误:

Error: Cannot find module '.src/Main.sass?theme=themename'.

我希望这可以根据这里的信息工作:

完全动态的语句(例如import(foo))将失败,因为webpack至少需要一些文件位置信息.这是因为foo可能是系统或项目中任何文件的任何路径.import()必须至少包含有关模块所在位置的一些信息,因此捆绑可以限制在特定目录或文件集中.

和

包含可能在import()调用上请求的每个模块.例如,import(./locale/${language}.json)将导致./locale目录中的每个.json文件都捆绑到新的块中.在运行时,当计算了变量语言时,可以使用诸如english.json或german.json之类的任何文件.

这不是一个完全动态的语句,它有完整的文件路径(位置信息),可以导入,没有问题sans查询字符串.

---

编辑:我已经创建了一个可以复制的测试仓库.使用prop定义的查询字符串src/Main.js导入.当使用此组件时,您可以看到,但是,使用完整字符串(包括查询)导入时,导入的文件没有任何问题.这可以通过使用作为组件来看出.Main.component.sassthemeName<Main/>src/App.jsCannot find module './Main.module.sass?theme=themename' error.src/Main-no-var.js<Main>

这是用于此示例的webpack配置.

Answer 1

如果你看这部分文档

例如， import(./locale/${language}.json) 将导致 ./locale 目录中的每个 .json 文件被捆绑到新块中。在运行时，计算变量语言后，任何文件（如 english.json 或 German.json）都可以使用。

这意味着静态分析将搜索.json文件./locale/夹中的每个文件并将其打包，这意味着它将知道每个可能的目标。有了query string你就会有可能的目标基本上是无限的数字，因为query string可以是任何东西，因此将不能够知道什么捆绑。

我想这只是与dynamic path分辨率完全不同的功能，当前import()声明显然不支持。

最好的办法是更改文件夹结构，.css为每个主题设置多个文件，然后dynamic path按照文档（语言示例）中的建议加载它，或者您可以执行以下操作

const themes = {
  "themename": () => import(
    `./Main.module.css?theme=themename`
  ),
  // other themes
}

通过这种方式，您将拥有更清晰的代码，显示可以传递给的所有可能的主题prop（静态分析会确切地知道是什么query string，因此它会起作用），然后您可以像这样使用它

componentDidMount = () => {
    const { themeName } = this.props
    themes[themeName]().then((result) => {
      this.setState({ theme: result })
    })
}

我宁愿按照您的建议使用查询字符串实现，但就目前而言，据我调查，这是不可能的。