title: Webpack css setup and best practise
body: <p>I am new to webpack and would like to use it with reactjs but kind of lost confused right now. I would like to know how css is handled in the client site development process with webpack. I know that webpack bundles all my js and links it as bundle.js which I reference in my html file like this:<code>&lt;script src="http://localhost:3000/assets/bundle.js"&gt;&lt;/script&gt;</code> based on my configuration of webpack-dev-server.
  Now, I do have also a css file. Where does this go? what would be my url to reference this in my html file.
  I understand that there is a style-loader and a css-loader and also an ExtractTextPlugin, but where does the output belong? I saw that I can <code>var css = require('path/customStyle.css')</code> but dos not seems to see where it appears? I do this in my index.jsx file.
  So the question his: How to get this together, that I can reference my customStyle.css. What do I do wrong, or what do I miss 
  Here is my project folder structure:</p>
  
  <pre><code>|_source
  |   |_js
  |       |_js
  |       |    |_components
  |       |      |_ *.jsx
  |       |_index.jsx
  |_assets
  |  |_css
  |    |_customStyle.css
  |__index.html
  </code></pre>
  
  <p>My webpack.config.js looks like this</p>
  
  <pre><code>var ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  module.exports = {
      entry: './source/js/index.jsx',
      output: {
          filename: 'bundle.js',
          publicPath: 'http://localhost:8090/assets'
      },
      module: {
          loaders: [
              {
                  test: /\.jsx$/,
                  loader: 'jsx-loader?insertPragma=React.DOM&amp;harmony'
              },
              {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader","css-loader")
              }
          ]
      },
      externals: {
  
          'react': 'React'
      },
      resolve: {
          extensions: ['', '.js', '.jsx','.css']
      },
      plugins:[
        new ExtractTextPlugin("styles.css")
      ]
  }
  </code></pre>
  
  <p>Html file looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script src="../node_modules/react/dist/react-with-addons.js"&gt;&lt;/script&gt;
  &lt;!-- like to link css here but don't know the path to link to --&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container"&gt;
  
    &lt;/div&gt;
    &lt;script src="http://localhost:3000/webpack-dev-server.js"&gt;&lt;/script&gt;
    &lt;script src="http://localhost:3000/assets/bundle.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help with some background on how the webpack way works and how to get my styles in would be fantastic.</p>