javascript - WebPack すべての css ファイルを 1 つの css ファイルに入れる方法

Question

私は WebPack の初心者で、CSS ファイル (.app/styles/[css files...]) のディレクトリを取り、それらを 1 つの CSS ファイル (dist/styles.css) に出力できるようにしたいと考えています。

現在、すべての JavaScript ファイルは 1 つの「index_bundle.js」ファイルにコンパイルされていますが、これは完璧ですが、CSS ファイルについても同じことを達成したいと考えています。

多くの「グーグル」の後、WebPack の ExtractTextPlugin がこれに役立つはずであることがわかりましたが、これは「エントリ」プロパティに追加された 1 つの CSS ファイルに対してのみ機能します (例: entry: {style: ". /app/styles/style.css"}) をリンク タグとして html のヘッドに追加しますが、これは問題ありませんが、すべての css ファイルを 1 つの styles.css ファイルに入れて、それを html のリンクとして頭。

現在の WebPack 構成は次のようになります。

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ExtractTextPluginConfig = new ExtractTextPlugin(
    "styles.css", 
    {
        allChunks: false
    }
);

module.exports = {
    entry: {
        index: "./app/index.js"//,
        //styles: "./app/styles/style1.css" // I don't want one file, I want to use a directory eg: "./app/styles/"
    },
    output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader'
            },
            { 
                test: /\.css$/, 
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            }
        ]
    },
    plugins: [
        HtmlWebpackPluginConfig,
        ExtractTextPluginConfig
    ]
}

誰かが私を正しい方向に向けることができますか? それが別のプラグインまたは別のアプローチであっても。どんな助けでも大歓迎です！

編集: 私の新しい WebPack 構成は次のようになります。

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ExtractTextPluginConfig = new ExtractTextPlugin(
    "index_bundle.css"
);

module.exports = {
    entry: [
        './app/index.js',
        './app/index.css'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    module: {
        preloaders: [
            {
                test: /\.css/,
                exclude: /styles/, 
                loader: 'import-glob-loader'
            }
        ],
        loaders: [
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader'
            },
            { 
                test: /styles\.css$/, 
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            { 
                test: /\.json$/, 
                loader: 'json' 
            }
        ]
    },
    devServer: {
        historyApiFallback: true
    },
    plugins: [
        HtmlWebpackPluginConfig,
        ExtractTextPluginConfig
    ]
}