title: Error loading css file in webpack
body: <p>i am trying to load a css file with webpack but i keep getting this error message as shown in the picuture.</p>
  
  <p><a href="https://i.stack.imgur.com/jnCmG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jnCmG.jpg" alt="pics showing error"></a>
  i have done a lot of searching so please don't, all questions don't seem to fit my case.</p>
  
  <p>below given are the various file am working with</p>
  
  <h2>package.json</h2>
  
  <pre><code>{
    "name": "loading_files",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "compile": "webpack",
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "css-loader": "^0.28.11",
      "lodash": "^4.17.5",
      "style-loader": "^0.21.0",
      "webpack": "^4.6.0",
      "webpack-cli": "^2.0.14"
     }
  }
  </code></pre>
  
  <h2>webpack.config.js</h2>
  
  <pre><code>"use strict"
  
  let path = require("path");
  
  module.exports = {
    mode: "development",
    entry: "./src/index.js",
  
    output: {
      filename: 'bundler.js',
      path: path.resolve(__dirname, 'dist'),
    },
   module:{
     rules: [
              {
                test: "/\.css$/",
                use: ["style-loader", "css-loader"]
              }
           ]
         }
   }
  </code></pre>
  
  <h2>index.js</h2>
  
  <pre><code>import _ from 'lodash';
  import css from './index.css';
  
  function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
    return element;
  }
  
  document.body.appendChild(component());
  </code></pre>
  
  <h2>index.css</h2>
  
  <pre><code>.hello{
    color: red;
  
  
   }
  </code></pre>
  
  <p>am currently using <code>webpack v4.6.0</code> and <code>npm v5.0.0</code></p>