如何使用 Webpack 5 生成不同的 CSS 包

Question

我有一个带有webpack（自己配置）的React项目，我需要从中生成不同风格的不同包。它总是同一个应用程序，只是在它生成的每个包中，它需要一个特定的 css 文件才能在包中结束。例如，在存储库中我会有不同的 css 文件：

- src
  - index.js
  - index.html
  - themes
    - theme1
        theme1.css
    - theme2
        theme2.css
    - theme3 
        theme3.css

当我构建它时，它应该如下所示：（在“构建”文件夹中）

- build
     index.html
     main.css // with the styles of theme2, for example
     bundle.js

我不知道如何用 webpack 或哪个插件来做这个，希望你能帮助我。谢谢

Answer 1

您可以通过在配置中添加多个条目来获得多个单独的 CSS。

示例：

webpack.config.js

module.exports = {
  entry: {
    main: "./path/to/your_main.js",
    "css-theme-1": "./path/to/your/theme.css",
    "css-theme-2": "./path/to/your/another-theme.css",
  }
}

此外，您可以通过在 mini-css-extract-plugin 中配置 filename 属性将其构建到文件夹中。

进一步阅读：

Webpack Code Splitting

如何使用 Webpack 5 生成不同的 CSS 包

How to generate different CSS bundle with Webpack 5

css

frontend

reactjs

webpack