我可以使用webpack imports-loader来要求CSS文件和某些JS依赖项吗？ （或者，如何隐式加载CSS）

Question

我正在尝试使用RequireJS将大型项目转换为Webpack 4.最终目标是能够并排使用这两种工具，至少对于开发而言，只需对实际代码进行最少的更改。

在涉及CSS时，我遇到了将RequireJS配置文件中的填充条目转换为其Webpack等价物的问题。例如，这是RequireJS配置条目的样子：

shim: {
  jsDependency: {
    deps: ["otherJsDependency", "css!cssDependency"]
  }
}

Webpack推荐的shim方法是使用imports-loader，所以我在那里尝试过（在module.rules数组内）：

{
  test: /jsDependency/,
  use: ['imports-loader?otherJsDependency,cssDependency']
}

JS似乎解决得很好。我无法通过这种方式加载CSS。其他与依赖项一起显式导入的CSS文件加载正常。

我想我可以创建一个包装文件，它需要CSS和原始依赖项并行显示。这将是一个痛苦，但不是太多的工作。我们的RequireJS配置中有很多这些条目。

然而......是否真的没办法像Webpack那样隐式/加载CSS？在这里，进口加载器是错误的工具吗？我觉得我一定错过了什么。

谢谢！

Answer 1

imports-loader适用于JavaScript。您想使用css-loader。

Answer 2

据我所知，对于完全模仿RequireJS使用shim进行隐式导入的行为的webpack规则，无法做到这一点。例如，我们在很多旧代码中使用它来加载CSS等jQuery插件。

简单的解决方案是创建一个中间文件（即：webpack_libraryName.js），导入并返回您要使用的库。然后，您可以在导入时将其显式导入任何您要加载的副作用。将此新文件作为别名映射到Webpack配置中的旧文件意味着您不需要编辑任何实际代码，并且可以同时运行这两个版本。