title: serve public static files with webpack
body: <p>I struggle to get webpack configured as I want it to be.
  I run my dev-server on <strong>localhost:8080</strong> and want to serve my app through <strong>localhost:8080/static/js/bundle.js</strong> and that is what I get with this webpack.config.js file I've attached below. in my file structure i've alse attached I want to serve also the other files located in <strong>dist/static</strong> as static files, so <strong>localhost:8080/static/css/style.css</strong> will be serving this <strong>dist/static/css/style.css</strong> file for example.</p>
  
  <p>it is probably something wrong i did in the config file, and i'm not that familiar with webpack so i don't know if im asking the question so you can understand.</p>
  
  <p>My directory tree is:</p>
  
  <pre><code>client
    -- /dist
      -- /templates
        -- /admin
          -- index.html
      -- /static
        -- /css
          -- style.css
        -- /js
    -- /node_modules
    -- /src
    -- /test
    -- package.json
    -- webpack.config.json
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>var webpack = require('webpack');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  var plugins = [
      new webpack.ProvidePlugin({
          'fetch': 'imports?this=&gt;global!exports?global.fetch!whatwg-fetch'
      }),
      new ExtractTextPlugin('app.css', {
          allChunks: true
      }),
      new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
      })
  ];
  
  var cssLoader = {};
  
  if(process.env.NODE_ENV == 'production'){
      plugins.push(
          new webpack.optimize.UglifyJsPlugin()
      );
  
      cssLoader = {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract('style', 'css?modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]')
      };
  
  } else {
  
      cssLoader = {
          test: /\.css$/,
          loaders: [
              'style?sourceMap',
              'css?modules&amp;importLoaders=1&amp;localIdentName=[path]___[name]__[local]___[hash:base64:5]'
          ]
      }
  
  }
  
  module.exports = {
      entry: [
          'react-hot-loader/patch',
          'webpack-dev-server/client?http://localhost:8080',
          'webpack/hot/only-dev-server',
          './src/index.js'
      ],
      module: {
          loaders: [
              {
                  test: /\.jsx?$/,
                  exclude: /node_modules/,
                  loaders: ['babel']
              },
              cssLoader
          ]
      },
      resolve: {
          extensions: ['', '.js', '.jsx']
      },
      output: {
          path: __dirname + '/dist/static',
          publicPath: '/static/js',
          filename: 'bundle.js'
      },
      devServer: {
          contentBase: './dist/templates/admin',
          hot: true,
          historyApiFallback: true
      },
      plugins: plugins
  };
  </code></pre>
  
  <p>dist/templates/admin/index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;My App&lt;/title&gt;
      &lt;link href="static/css/style.css" type="text/css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="app"&gt;&lt;/div&gt;
  &lt;script src="static/js/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>thanks guys :)</p>