javascript - Webpack 防止某些带有 css 模块的文件发出 css

Question

我正在尝试以这种方式配置 webpack，对于某些 .css 文件，它不会发出 css(不会向 styles.css 添加任何内容)，但发出 locals(className到js中导入对象的样式映射)。在 css-loader 中，modules 选项始终处于启用状态(又名 CSS Modules )。例如:

在某些.js文件中:

import cssNoEmit from './styles.noemit.scss'
import cssEmit from './styles.scss'

styles.noemit.scss的内容:

.testNoEmit {
  background: orange;
}

styles.scss的内容:

.testEmit {
  background: blue;
}

我想要实现的是最终生成的 .css 仅包含 .testEmit 类。此外，cssNoEmit 和 cssEmit 都包含到生成的 .css

中相关类的映射

也许可以使用extract-text-plugin解决这个问题，但我不是在寻找该解决方案，因为该插件已被弃用。

这是我尝试过的:

所有尝试都有可重现的示例 here

编辑:尝试 1(感谢 @felixmosh)和 5 成功了。

尝试 1(工作)。 css-loader有一个选项onlyLocals。 css-loader 中的描述 documentation非常模糊，但据我了解，它应该做与我想要实现的完全相同的事情。

  {
    test: /\.noemit\.scss$/,
    use: [
      //MiniCssExtractPlugin.loader, // after disabling this, it started to work
      {
        loader: 'css-loader',
        options: {
          modules: {
            mode: 'local',
            exportGlobals: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
            context: path.resolve(__dirname, 'src'),
            hashPrefix: '_',
          },
          importLoaders: 2,
          onlyLocals: true, // setting this to true causes transpilation to crash
        },
      },
      
      ...

    ],
  },

尝试 5(有效，但并不完美)。尝试使用 webpack 内置功能 SplitChunksPlugin。我尝试根据this为此用例创建一个配置, SplitChinksPlugin docs , this , this .

  ...

  optimization: {
    splitChunks: {
      cacheGroups: {
        groupUnusedStyles: {
          name: "unusedStyles",
          chunks: "all",

          test: /\.noemit\.scss$/,

          enforce: true
        },
      }
    }
  }

此方法将不需要的 CSS 重定向到 unusedStyles.css

它确实有效，但有一个小但令人沮丧的缺点。除了usedStyles.css之外，它还生成unusedStyles.js，并且必须将其包含在html中，否则应用程序将无法运行。

更具体地说，两个 block 都必须位于 html 内:

  <script type="text/javascript" src="/app.bundle.js"></script>
  <script type="text/javascript" src="/unusedStyles.bundle.js"></script>

有人知道如何使其工作而不需要添加另一个 bundle 吗？

尝试 2(不起作用)。不要使用 onlyLocals 设置并省略负责“css 输出”的加载器(例如 style-loader 或 mini-extract-css-plugin )。在这种情况下导入的css内容很奇怪

尝试 3(不起作用) null-loader 也不起作用，因为它只导入一个空对象

尝试 4(不起作用)。 There是另一个想法:

class ServerMiniCssExtractPlugin extends MiniCssExtractPlugin {
  getCssChunkObject(mainChunk) {
    return {};
  }
}

... // use ServerMiniCssExtractPlugin the same way as MiniCssExtractPlugin 

这不起作用，因为最终的 .css 具有所有样式，就像使用普通的 MiniCssExtractPlugin 一样

此外，there是 github 上的相关线程。

Answer 1

您的第一次尝试是正确的，只需从 noemit.scss 加载程序列表中删除 MiniCssExtractPlugin.loader 即可。

我在本地尝试过，它有效，输出的 css 仅包含无“noemit”文件，但两者都有 css-modules 对象映射。

删除的加载器(MiniCssExtractPlugin)负责将 scss 包含在最终的 css 文件中。