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

Question

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

当涉及 CSS 时，我运行遇到了将我的 RequireJS 配置文件中的 shim 条目转换为其 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 吗？ imports-loader 是这里工作的错误工具吗？我觉得我一定是错过了什么。

谢谢！

Answer 1

imports-loader is for JavaScript. You want to use css-loader.

Answer 2

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

简单的解决方案是创建一个中间文件（即：webpack_libraryName.js）来导入和returns 您要使用的库。然后你可以显式导入任何你想加载的东西，当它被导入那里时作为副作用。将这个新文件作为别名映射到 Webpack 配置中的旧文件意味着您不需要编辑任何实际代码并且可以运行同时构建。

Can I use webpack imports-loader to require CSS files alongside certain JS dependencies? (or, how to implicitly load CSS)