webpack not generating css file -

implementing webpack asset management tutorial .but webpack not generating css file in output path

webpack.config.js

const config = {   entry: './src/index.js',   output: {     filename: 'bundle.js',     path: __dirname + '/build'   },   module: {     rules: [       {         test: /\.css$/,         use: [           'style-loader',           'css-loader'         ]       },       {         test: /\.(jpeg)$/,         use: [           {             loader: 'file-loader',             options: {               name: '[path][name].[ext]'             }           }         ]       }     ]   } }; 

index.js

  import './style.css';   import icon './yo1.jpg';    function component() {     var element = document.createelement('div');      element.innerhtml = 'hello webpack'     element.classlist.add('hello');      var myicon = new image();     myicon.src = icon;      element.appendchild(myicon);      return element;   }    document.body.appendchild(component()); 

problem

images nicely created in build folder

but

it not creates style.css in build folder , wrong doing ?

webpack not create separate css files. get's bundled javascript , injected dom style tags webpack bootstrap code.

if want create separate css file, can use extracttextplugin - https://github.com/webpack-contrib/extract-text-webpack-plugin

const extracttextplugin = require("extract-text-webpack-plugin");  module.exports = {   module: {     rules: [       {         test: /\.css$/,         use: extracttextplugin.extract({           fallback: "style-loader",           use: "css-loader"         })       }     ]   },   plugins: [     new extracttextplugin("styles.css"),   ] }