3

我有一个使用 Webpack 4 的项目，它非常接近 preact-boilerplate repo，如下所示：https ://github.com/developit/preact-boilerplate/blob/master/webpack.config.babel.js#L50

就像该项目的设置方式一样，它使用 ExtractTextPlugin 并将“所有”输出 CSS 填充到 style.css 文件中。这很好，花花公子，但在一些小的边缘情况下。如果您在几分之一秒内注意到一个尴尬的白页，似乎 CSS 加载速度不够快，而且从性能预期来看，在标题中设置内联重要 CSS 样式更有意义。比如normalize.css，还有一些body属性。

TL;DR：有没有办法将我的src/style/或 normalize.css 与我的src/components/css 隔离为不同的输出类型？例如：src/style/将内联 HTML 在 head 中，而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 }
                    }
                ]
            })
        },
}

发布了一些代码以进行澄清。

编辑：我找到了https://github.com/numical/style-ext-html-webpack-plugin但是目前它似乎不支持 Webpack 4。

4

0 回答 0