title: webpack style loader and css loader not working for simple example
body: <p>I attempting to follow the tutorial here <a href="https://webpack.js.org/guides/asset-management/" rel="noreferrer">https://webpack.js.org/guides/asset-management/</a>  however I can never get the css file to load.  (the text is never red)</p>
  
  <p><a href="https://github.com/bryandellinger/webpackassetmanagement" rel="noreferrer">https://github.com/bryandellinger/webpackassetmanagement</a></p>
  
  <pre><code>&gt; --dist
  &gt; ----bundle.js
  &gt; ----index.html
  &gt; --src
  &gt; ----index.js
  &gt; ----style.css
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>const path = require('path');
      module.exports = {
        entry: './src/index.js',
        output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist')
        },
         module: {
           rules: [
             {
               test: /\.css$/,
               use: [
                 'style-loader',
                 'css-loader'
               ]
             }
           ]
         }
      };
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "webpack1",
    "version": "1.0.0",
    "description": "webpack tutorial",
    "private": true,
    "scripts": {
      "dev": "lite-server",
      "build": "webpack"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "css-loader": "^1.0.0",
      "style-loader": "^0.22.1",
      "webpack": "^4.17.1",
      "webpack-cli": "^3.1.0"
    },
    "dependencies": {
      "lite-server": "^2.4.0",
      "lodash": "^4.17.10"
    }
  }
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>    import _ from 'lodash';
  
      function component() {
          let element = document.createElement('div');
  
          // Lodash, currently included via a script, is required for this line to work
          element.innerHTML = _.join(['Hello', 'webpack'], ' ');
          element.classList.add('hello'); 
          return element;
        }
  
        document.body.appendChild(component(
  
  ));
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>.hello {
      color: red;
    }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Asset Management&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script src="bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>