javascript - webpack配置多入口，多入口下的css如何合并

Question

Webpack.config

var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
    entry: {
        post: "./post",
        about: "./about"
    },
    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js',
        publicPath: './dist/',
        chunkFilename: '[id].chunk.js'
    },
    module: {
        loaders: [{
            test: /\.js?$/,
            loader: 'babel',
            query: {
                presets: ['es2015']
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        }, {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
        }, {
            test: /\.(png|jpe?g|gif)$/,
            loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
        }]
    },
    plugins: [
        new ExtractTextPlugin("app.css", {
            allChunks: true
        })
    ]
};
module.exports = config;

post.js

require('./post.css');

post.css

.post {
    width: 100px;
    height: 100px;
}

about.js

require('./about.css');

about.css

.about {
    font-size: 12px;
}

使用了 ExtractTextPlugin, 最后生成了一个 app.css

.post {
    width: 100px;
    height: 100px;
}

好像只把post.css的内容打包进去，如何配置可以同时把post.css和about.css打包到app.css

.about {
    font-size: 12px;
}
.post {
    width: 100px;
    height: 100px;
}

Answer 1

ExtractTextPlugin没有这个功能呢
再说，ExtractTextPlugin本来就是针对各个页面独有的CSS，根本就不应该打包到同一个CSS文件里（因为怕CSS冲突了）

有需要公用的CSS，可以配合CommonsChunkPlugin，有多个入口调用的话就会被归到公共的chunk里，继而被ExtractTextPlugin打包到公共的CSS文件里的了

具体可参考《webpack多页应用架构系列（三）：怎么打包公共代码才能避免重复？》和《webpack多页应用架构系列（五）：听说webpack连less/css也能打包？》