Webpack CSS Chunk Merging

时间:2018-03-10 06:54:11

标签: webpack

我试图用webpack生成一个css文件。

我的app {css是用extract-text-webpack-plugin创建的,很好地将我的所有css文件捆绑成一个。

问题的出现是因为我们使用google-fonts-webpack-plugin来下载字体并创建包含字体的css块。

我的猜测是extract-text-webpack-plugin只添加了加载ExtractTextPlugin.extract的文件,而且因为字体块不是实际的css文件,所以它不会包含它。

CommonsChunkPlugin也没有帮助。

我也尝试过使用merge-files-webpack-plugin打破AFAIK,因为块不是来自文件。

const webpackConf = {
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
            }
        ],
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'app.css',
            allChunks: true
        }),
        new GoogleFontsPlugin({
            name: 'fonts',
            fonts: [
                { family: 'Titillium Web', variants: ['400', '600', '700'] },
                { family: 'Roboto Condensed', variants: ['400'] }
            ]
        }),
    ]
};

我们如何创建包含应用和字体的单个css文件?

0 个答案:

没有答案