Question

我正在尝试通过Webpack配置实现多个目标，并且我想知道是否已经解决了这种情况的插件或流程，或者我需要自己制作插件，并且我将尝试解释我的需求：< / p>

在我所有的文件/组件中，都有供供应商css导入和具有css-modules的组件范围css导入。流将需要像（取决于组件是惰性的还是要注意会有捆绑或多个大块）：

第一个组成部分

1。从作用域样式文件中获取，并使用CSS模块加载 2.从供应商的样式表中获取，不使用CSS模块加载它，查看组件html或jsx中使用了哪些类， 3.如果组件异步，则将其与范围内的样式文件合并在单独的块中，或将其附加到捆绑包中

第二部分（下一个） 1.一样 2.从供应商处获取样式表，以比较在组件html或jsx中使用了哪些类，但仅追加了先前捆绑/块中尚未追加的类。 3.相同

最后，如果我们所有的组件都同步，我们将得到css包，其中包含所有使用过的供应商类和所有作用域的css，但是如果有异步组件，我们将永远不会在第一个包中没有使用的供应商类，并且只有它们会加载组件异步块以及组件范围的CSS

那是问题之一。

第二件事是，我希望能够在组件中指定哪个组件至关重要，因此，如果我指定5个关键组件，则该组件中所有供应商使用的类都将内联，并且所有作用域样式都将内联（与html一起使用） webpack插件），所有其余的都将放在捆绑包中，例如，如果我们有1个异步组件，它将包含范围内的样式，并且仅包含来自供应商的CSS，而此页面之前没有使用过。

当前，我正在使用purgecss，但是它不能像我所描述的那样工作，但是它正在清除供应商css中所有未使用的类，但是由于关键组件和异步组件，它没有我需要的连续模式。

我还在关键CSS中使用to-string-loader，但我仅将其应用在范围内的CSS上，而不是在供应商上，所以我基本上有一半的解决方案，因为我需要定期使用供应商捆绑包，而忽略了大多数其中的CSS只有在加载了一些异步组件之后才会使用。

我实际上也有使用html-plugin将字符串从to-string-loader附加到ejs模板中的问题，所以我的第三个问题是关于从组件向html-plugin发送信息的可能性，例如：

   import critical from "./test.css";

   send_to_variable_in_html_plugin(critical); //and then use same variable in ejs template

最后，还有一个问题，关于webpack中的异步加载，以及如何使自动预取CSS也成为问题。目前，我正在使用这种东西：

     import(
    /* webpackChunkName: "my-chunk-name_2" */
    /* webpackMode: "lazy" */
    /* webpackPrefetch: true */ "./main_data.js").then(m => {

           //do your work
        })

那是仅预取js块，但是也生成的css块不是预取，而是仅在js加载时才加载，所以我做了：

       function prefetchCss(m) {
          var link = document.createElement('link');
          link.rel = 'prefetch';
          link.as = 'style';
          link.href = "/dist/" + m + ".chunk.css";
          document.head.appendChild(link);
       }


       prefetchCss("my-chunk-name_2");

要与动态导入一起使用，但是解决方案不直观，而且看起来很hacky。是否可以“强制” webpack来预取CSS？

因此，简历：

将供应商的css零件动态地附加到可以内联，捆绑或单独的块中的组件块。
使用-> inlineStyles（）之类的强制性功能将某些组件强制为内联样式，以便将信息发送到webpack，从而使样式既不会包含在捆绑包中，也不会成块包含，因为它们已经包含在内嵌样式中
然后在组件中分配一些变量，稍后将在html webpack插件中使用，因此我可以随时随地放置那些内联样式（我更喜欢自己的.ejs模板，因此inject为false。
强制webpack在js块旁边也预取css块。

Webpack CSS加载程序每个文件组件一个块，并具有顺序附加和按需内联关键的功能

0 个答案: