当基于组件的CSS使用Webpack4作为文件加载时，如何内联重要的CSS？

我有一个使用Webpack 4的项目，非常接近预执行样板回购，如下所示：

就像项目的设置一样，它使用ExtractTextPlugin并将“所有”输出CSS填充到style.CSS文件中。这很好，很漂亮，但在一些小边缘的情况下。如果你在短短的几秒钟内注意到一个笨拙的白色页面，那么CSS的加载速度似乎还不够快，另外，从性能角度来看，在页眉中设置内联重要CSS的样式更有意义。例如normalize.css和一些body属性

TL；DR：有没有办法将我的

src/style/

或normalize.css与我的

src/components/

css分离成不同的输出类型？e、 g:

src/style/

将在head中内联HTML，而

src/components/

将使用HtmlWebpackPlugin在style.css中加载

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 }
                    }
                ]
            })
        },
}

发布了一些代码进行澄清

---

编辑：我发现目前它似乎不支持Webpack 4。

找到解决方法了吗？我有同样的问题：D