Question

不同的Webpack样式加载器处理@import子句的方式不同：

css-loader converts @import to js-require产生模块依赖性
postcss-import（postcss插件）generates a message for each @import。还有 postcss-loader converts each message to file-dependency

当我尝试使用splitChunksPlugin时，这种差异成为一个问题。据我检查，它可以with module-dependencies only使用。因此，通过@import导入的模块和从js导入的相同模块可能不是相同的依赖项实体。

最小示例：

2个条目
cssOnlyEntry需要Foo.scss，后者需要通过@import
hydratedEntry需要Foo.tsx，它需要其他所有内容。需要两次Bar.scss（通过js和css导入）

有关更多详细信息，请参见我的第一期https://github.com/postcss/postcss-loader/issues/420。

配置为

// webpack.config.js
// part of optimization
splitChunks: {
  cacheGroups: {
    default: false,
    components: {
      test: /(Foo|Bar)/,
      enforce: true,
      chunks: "initial"
    }
  }
}

// webpack.config.js
// part of module.rules
{
  test: /\.s?css$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    "postcss-loader"
  ]
}

// postcss.config.js
module.exports = {
    parser: 'postcss-scss',
    plugins: [
        require('postcss-import')()
    ]
};

当使用postcss-loader + postcss-import时，我得到了两个css块：

一个用于Foo.scss和Bar.scss
另一个Bar.scss

但是，我期望只看到一个带有Foo.scss和Bar.scss的css-chunk。

我认为postcss-loader家伙认为@ import-ed文件是使HMR工作的文件依赖项。但是他们可能已经忘记了splitChunks。

您怎么看？ Mini-css-extract-plugin doesn't do anything with file-dependencies。确保不会转换依赖项类型。

我写了自己的装载机来解决此问题，但看起来有些棘手。我知道文件依赖项包含通过@import导入的文件。所以我只为它们添加js-requires：

module.exports = function(content) {
    var requiredJs = [];

    // get file dependencies produced by postcss-loader
    this.getDependencies().reverse().forEach(dep => {
        if (dep.endsWith('.scss') && !this.currentRequest.endsWith(dep)) {
            // and convert them to cjs-imports
            requiredJs.push(
                'require("' + dep + '");'
            );
        }
    });

    const result = [...requiredJs, content].join('\n');

    return result;
};

Postcss- @ import-ed模块实际上未由splitChunksPlugin

0 个答案: