WebPack wie alle CSS-Dateien in eine CSS-Datei

Question

Ich bin ziemlich neu in WebPack, und ich möchte in der Lage sein, ein Verzeichnis von CSS-Dateien (.app/styles/[CSS-Dateien ...]) und ausgegeben werden sie in eine CSS-Datei (dist/styles.css).

Derzeit sind alle JavaScript-Dateien in einer einzigen "index_bundle.js" -Datei kompiliert, was perfekt ist, aber ich möchte das gleiche für meine CSS-Dateien erreichen.

Nach viel "Googeln" habe ich festgestellt, dass das ExtractTextPlugin für WebPack dabei helfen kann, aber das funktioniert nur für eine CSS-Datei, die der Eigenschaft "entry" hinzugefügt wird (zB: entry: { style: "./app/styles/style.css"}), die dann als Link-Tag zum HTML-Kopf hinzugefügt wird, was gut ist, aber ich möchte, dass alle meine CSS-Dateien in eine styles.css-Datei gehen und sie dann verwenden das im HTML-Kopf als Link.

Mein aktueller WebPack Config wie folgt aussieht:

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

Kann mir bitte jemand in die richtige Richtung? Auch wenn es sich um ein anderes Plugin oder einen anderen Ansatz handelt. Jede Hilfe wird sehr geschätzt!

EDIT: Meine neue WebPack Config wie folgt aussehen:

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

Answer 1

Ok, so scheint es, ein Kamel-Fall Problem gewesen zu sein.

Mit Hilfe von Davin Tryon konnte ich mein Problem lösen - danke!

Wenn man sich: https://www.npmjs.com/package/import-glob-loader sie haben die folgenden:

preloaders: [{ 
    test: /\.scss/, 
    loader: 'import-glob-loader' 
}] 

Es sollte:

preLoaders: [{ 
    test: /\.scss/, 
    loader: 'import-glob-loader' 
}] 

Also am Ende, sieht meine ganze webpack.config.json wie folgt aus:

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: /\.css$/, 
       loader: ExtractTextPlugin.extract("style-loader", "css-loader") 
      }, 
      { 
       test: /\.json$/, 
       loader: 'json' 
      } 
     ] 
    }, 
    devServer: { 
     historyApiFallback: true 
    }, 
    plugins: [ 
     HtmlWebpackPluginConfig, 
     ExtractTextPluginConfig 
    ] 
} 

Und meine index.css Datei sieht so aus:

@import './styles/**/*'; 

Dies funktioniert für mich und ich bekomme eine einzige CSS-Ausgabedatei "index_bundle.css". Der Stil und die Skripte werden automatisch in die HTML-Vorlage eingefügt.

index.html vor der Injektion:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Admin - Login</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/> 
    </head> 
    <body> 
     <div id="app"></div> 
    </body> 
</html> 

index.html nach der Injektion in/dist-Ordner:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Admin - Login</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/> 
    <link href="index_bundle.css" rel="stylesheet"></head> 
    <body> 
     <div id="app"></div> 
    <script type="text/javascript" src="index_bundle.js"></script></body> 
</html>