Here's my webpack.config.js. I can't make it work. Besides that code, I provide 'import '../style.css' to my root component. I split the code to 2 bundles and want to get the third, this time with the css. However, it doesn't work.
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
app: ['./src/App.jsx'],
vendor: ['react','react-dom','whatwg-fetch','babel-polyfill','react-
router','react-router-bootstrap','react-bootstrap'],
},
output: {
path:path.resolve(__dirname,'static'),
filename: 'app.bundle.js',
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader'
},
{
test: /\.css$/,
loader: 'css-loader'
},
{
test: /\.jsx$/,
loader: 'babel-loader',
query: {
presets: ['react','es2015']
},
},
],
resolve: {
extensions:['.js','.jsx','.css'],
},
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor','vendor.bundle.js'),
],
}
Module not found: Error: Cannot resolve module 'css-loader'
Make sure you have the css-loader and style-loader modules installed
npm install style-loader css-loader --save-dev
You can also chain your loaders together so that you only have one rule block for your css
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]