Question

我们正在使用Webpack作为构建系统，并且一直在尝试将单个大型样式表拆分为多个块。

目前我们通过创建单独的入口点来实现这一点，但这给我们带来了一个问题;我们必须复制许多进口。这导致了碎片化的意大利面条依赖图，并且丢失了可能需要的任何共享上下文。

理想情况下，坚持使用单个入口点，编译单个大型样式表然后拆分它会很棒。

例如，给定这个单一入口点main.scss：

// start:critical.css
@import "shared/normalize";
@import "shared/grid";
@import "shared/layout";
@import "shared/typography";
// end:critical.css

@import "shared/component/tabs";
@import "shared/component/modal";
@import "app/content-list";
@import "app/content";
@import "gallery";

它编译了2个样式表; critical.css和main.css

Answer 1

为了解决这个问题，我们最终实现了一个简单的插件，在将输出写入文件之前将其分开：

function () {
    const extractor = /\/\*!\s?start:([\w_-]+\.css)\s?\*\/[\S\s]+\/\*!\s?end:\1\s?\*\//g;
    const target = /start:([\w_-]+\.css)/;

    this.plugin('emit', (compilation, callback) => {
        const css = Object.keys(compilation.assets).filter(filename => /\.css$/.test(filename));

        css.forEach(filename => {
            const source = compilation.assets[filename].source();
            const blocks = source.match(extractor);

            blocks && blocks.forEach(block => {
                const name = block.match(target).pop();

                // add a new output file
                compilation.assets[`./public/${name}`] = {
                    source: () => block,
                    size: () => block.length
                };
            });

            // remove blocks from the parent
            compilation.assets[filename].source = () => source.replace(extractor, '');
        });

        callback();
    });
}

使用Webpack将样式表拆分为多个文件

1 个答案: