1

我们使用 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

4

1 回答 1

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();
    });
}
于 2016-05-08T10:00:08.930 回答