Как я могу встроить важный CSS, в то время как CSS на основе компонентов загружается как файл с помощью Webpack 4?

Question

У меня есть проект, использующий Webpack 4, очень близкий к репозиторию preact-шаблон, например: https://github.com/developit/preact-boilerplate/blob/master/webpack.config.babel.js#L50

Как и при настройке этого проекта, он использует ExtractTextPlugin и помещает "весь" выходной CSS в файл style.css. Что хорошо и модно, но в некоторых небольших случаях. Похоже, что CSS загружается недостаточно быстро, если вы заметили неуклюжую белую страницу за долю секунды, плюс это имеет больше смысла с точки зрения производительности и стиля встроенного важного CSS в заголовке. Например, normalize.css и некоторые атрибуты тела.

TL; DR: есть ли способ изолировать мой src/style/ или normalize.css с моим src/components/ CSS на разные типы вывода? например: src/style/ будет встроенный HTML в голове, в то время как src/components/ загрузит в style.css используя HtmlWebpackPlugin?

module : {
    rules: [
        {
            test:  /\.(scss|css)$/,
            include: [path.join(SRC_PATH, 'components')],
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: { modules: true, sourceMap: isDevelopment, importLoaders: 1, minimize: true }
                    },
                    {
                        loader: `postcss-loader`,
                        options: {
                            sourceMap: isDevelopment,
                            plugins: () => {
                                autoprefixer({ browsers: [ 'last 4 versions' ] });
                            }
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: isDevelopment }
                    }
                ]
            })
        },
        {
            test:  /\.(scss|css)$/,
            exclude: [path.join(SRC_PATH, 'components')],
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: { modules: true, sourceMap: isDevelopment, importLoaders: 1, minimize: true }
                    },
                    {
                        loader: `postcss-loader`,
                        options: {
                            sourceMap: isDevelopment,
                            plugins: () => {
                                autoprefixer({ browsers: [ 'last 4 versions' ] });
                            }
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: isDevelopment }
                    }
                ]
            })
        },
}

Выложил некоторый код для уточнения.

Изменить: я нашел https://github.com/numical/style-ext-html-webpack-plugin Однако в настоящее время он не поддерживает Webpack 4.