my webpack setup won't generate the external css file. It bundles my .js just fine however. I am using the ExtractTextPlugin and it's still not working. No errors are generated. Any help would be greatly appreciated! :-)
Here is my webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: './client/app/root.js',
output: {
path: path.resolve('./client/dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
watch: true,
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.less$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
]
},
plugins: [
new ExtractTextPlugin('styles.css')
]
};
Package.json dev dependencies
"devDependencies": {
"babel-core": "6.0.20",
"babel-eslint": "4.1.3",
"babel-loader": "6.0.1",
"babel-preset-es2015": "6.0.15",
"babel-preset-react": "6.0.15",
"babel-preset-stage-0": "6.0.15",
"eslint-plugin-react": "3.6.2",
"freezer-redux-devtools": "^1.1.0",
"css-loader": "^0.15.5",
"extract-text-webpack-plugin": "^0.8.2",
"less": "^2.5.1",
"less-loader": "^2.2.0",
"redux-devtools": "^2.1.5",
"style-loader": "^0.12.3",
"webpack": "^1.9.10",
"webpack-dev-server": "^1.14.0"
}
Folder structure:
client
--> app
--> dist
--> public
--> styles
I figured it out. works now! :-) I needed to setup multiple entry points like so:
entry: [
'./client/app/root',
'./client/styles/styles.less'
],