Webpack Config for Cookiecutter Django

*.html

...

{% block css %}

...

{% if not debug %}
  <!-- Currently, the css is included as part of javascript in development-->
  <!-- This includes the built css for production (I am currently using Grunt for this) -->
  <!-- If ExtractTextPlugin is configured properly, Webpack can handle separate css in development and production -->
  <script src="{% static 'css/project.css' %}"></script>
{% endif %}

{% endblock css %}

...
<!-- Insertion point for React if used -->
<div id="main"></div>
...

{% block javascript %}

...

{% if debug %}
  <!-- Needed for webpack-dev-server in development -->
  <script src="http://localhost:8080/static/app.js"></script>
{% else%}
  <!-- Bundles is built before use in production -->
  <script src="{% static 'js/bundles/app.js' %}"></script>
{% endif %}

{% endblock javascript %}

webpack.config.js

// webpack.config.js

var webpack = require('webpack');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var autoprefixer = require('autoprefixer');
// var ExtractTextPlugin = require("extract-text-webpack-plugin");

var path = './<app_name>/static/js/'


module.exports = {
  entry: path + 'src/app.jsx',
  output: {
    path: path + 'bundles/',
    publicPath: 'http://localhost:8080/static/',
    filename: 'app.js',
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js[x]?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },

      // { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader!css-loader!autoprefixer-loader!sass-loader') },
      // { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader!css-loader!autoprefixer-loader!less-loader') }, // use ! to chain loaders
      // { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader!autoprefixer-loader') },

      { test: /\.scss$/, loader: 'style-loader!css-loader!postcss-loader!sass-loader'},
      { test: /\.less$/, loader: 'style-loader!css-loader!postcss-loader!less-loader'}, // use ! to chain loaders
      { test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader'},
      {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new BrowserSyncPlugin(
      // BrowserSync options
      {
        // browse to http://localhost:3000/ during development
        host: 'localhost',
        port: 3000,
        // proxy the Webpack Dev Server endpoint
        // (which should be serving on http://localhost:3100/)
        // through BrowserSync
        proxy: 'http://localhost:8080/'
      },
      // plugin options
      {
        // prevent BrowserSync from reloading the page
        // and let Webpack Dev Server take care of this
        reload: false
      }
    )
  ],
  resolve: {
    // new ExtractTextPlugin("[name].css")
    
    // you can now require('file') instead of require('file.coffee', 'file.jsx', etc..)
    extensions: ['', '.js', '.jsx', '.json', '.coffee']
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
};