0

在我的 webpack 配置中，我有两个条目，“桌面”和“移动”。

根据文档：

https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-all-css-in-a-single-file

可以创建单个 css 文件，但是在我的项目中使用多个块 webpack 呈现的配置样式会引发多个警告，例如：

WARNING in chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/@soma-package/something/some/some.module.scss

在我的项目中，我使用模块联合和引导文件，根据此文档页面创建： https ://webpack.js.org/concepts/module-federation/#troubleshooting

我的index.js文件看起来像：

import('./boostrap');

另外，样式收集不正确，闪烁

我尝试更改 webpack 配置，例如：

module.exports = {
  // ...
  optimization: {
    minimizer: [
      '...',
      new CSSMinimizerWebpackPlugin(),
    ],
    splitChunks: {
      cacheGroups: {
        defaultVendors: false,
        styles: {
          name: (module, chunks) => chunks[0].runtime,
          type: 'css/mini-extract',
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
};

但是使用该配置 webpack 会引发错误：

ERROR in SplitChunksPlugin
Cache group "styles" conflicts with existing chunk.
Both have the same name "desktop" and existing chunk is not a parent of the selected modules.
Use a different name for the cache group or make sure that the existing chunk is a parent (e. g. via dependsOn).
HINT: You can omit "name" to automatically create a name.
BREAKING CHANGE: webpack < 5 used to allow to use an entrypoint as splitChunk. This is no longer allowed when the entrypoint is not a parent of the selected modules.
Remove this entrypoint and add modules to cache group's 'test' instead. If you need modules to be evaluated on startup, add them to the existing entrypoints (make them arrays). See migration guide of more info.

如何正确地将所有样式添加到主块中的单个文件？

4

0 回答 0