Webpack防止某些带有css模块的文件释放css。

Question

我试图以这样的方式配置webpack :对于某个.css文件，它不发出css(不向styles.css添加任何内容)，而是释放局部变量(className用于js中导入的对象中的样式映射)。在css-加载器中，始终启用modules选项(又名CSS模块)。例如：

在某些.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来解决这个问题，但是我并不是在寻找那个解决方案，因为这个插件是不推荐的。

以下是我尝试过的：

所有尝试都有可复制的示例 这里

编辑：尝试1(感谢@felixmosh)和5设法工作。

尝试1(工作)。css-加载程序有一个选项onlyLocals。css-加载器文档中的描述非常模糊，但据我所知，它应该做的是完全相同的事情，我正在努力实现。

  {
    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。我试图基于这、SplitChinksPlugin文档、这、这为这个用例创建一个配置。

  ...

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

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

          enforce: true
        },
      }
    }
  }

此方法将不必要的css重定向到unusedStyles.css。

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

更确切地说，这两个块都必须在html中：

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

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

尝试2(不工作)。不要使用onlyLocals设置，不要使用负责"css输出“(如style-loader或mini-extract-css-plugin)的加载程序。在这种情况下，导入的css内容非常奇怪。

​

​

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

尝试4(不工作)。那里是另一个想法：

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

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

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

另外，那里是github上的一个相关线程。

Answer 1

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

我已经在本地尝试过了，它可以工作，out css只包含无"noemit“文件，但这两个文件都有css-模块对象映射。

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