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

【问题标题】：Split stylesheet into multiple files with Webpack使用 Webpack 将样式表拆分为多个文件
【发布时间】：2016-09-01 09:46:23
【问题描述】：

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

【问题讨论】：

标签： css sass webpack webpack-style-loader

【解决方案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();
    });
}

【讨论】：