I am fairly new to WebPack, and I want to be able to take a directory of CSS files (.app/styles/[css files...]) and output them into one CSS file (dist/styles.css).
Currently, all the JavaScript files is compiled into one single index_bundle.js file, which is perfect, but I want to achieve the same for my CSS files.
After a lot of Googling, I found that the ExtractTextPlugin for WebPack should be able to help with this, but this only works for one CSS file that is added to the entry property (eg: entry: {style: ./app/styles/style.css}) which is then added to the html's head as a link tag, which is fine, but I want all my css files to go into one styles.css file and then use that in the html's head as a link.
My current WebPack config looks like this:
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
]
}
Can someone please point me in the right direction? Even if it is another plugin or a different approach. Any help will be greatly appreciated!
EDIT:
My new WebPack config looks like this:
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
]
}
