extract-text-webpack-plugin does not create CSS file

Question

I have webpack.config.js that creates bundle.js but for some reason it does not create any css file although I have css-loader, style-loader and extract-text-webpack-plugin.

my webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  favicon: './client/asset/favicomatic/favicon.ico'
});
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'dist');

module.exports = {
  entry: ['./client/src/index.js'],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      { 
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [HtmlWebpackPluginConfig, new ExtractTextPlugin('style.css')]
};

I was hoping that I was creating this bundled css file at somewhere else I do not see any css file in my folders.

If anyone can find what I'm doing wrong, please let me know.

Thank you,

Answer 1

Configuration looks good to me.

General : While webpack loaders does resource specific tasks, its the source code that needs to define the dependency. In your source code wherever you need that CSS styles, you need to import that CSS file. It may sound strange to hear for the first time but thats how webpack works.

Webpack should process the CSS dependencies in the dependency graph. If the output css file is not created then the likely missing piece is dependency declaration in source code i.e require("./css-file-here") or import "./css-file-here"

From webpack Guide here

This enables you to import './style.css' into the file that depends on that styling.

Does the output show any signs it processed the CSS source files ?

In case if it helps have look at the src/entry.js in this repo : webpack-bootstrap . While at it you can try it to see how bootstrap styles applied via webpack.