Configuration

dev-server.js

// Creates a hot reloading development environment

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const DashboardPlugin = require('webpack-dashboard/plugin');
const config = require('./config/webpack.config.development');

const app = express();
const compiler = webpack(config);

// Apply CLI dashboard for your webpack dev server
compiler.apply(new DashboardPlugin());

const host = process.env.HOST || 'localhost';
const port = process.env.PORT || 3000;

function log() {
  arguments[0] = '\nWebpack: ' + arguments[0];
  console.log.apply(console, arguments);
}

app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath,
  stats: {
    colors: true
  },
  historyApiFallback: true
}));

app.use(webpackHotMiddleware(compiler));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, './src/client/assets/index.html'));
});

app.listen(port, host, (err) => {
  if (err) {
    log(err);
    return;
  }

  log('🚧  App is listening at http://%s:%s', host, port);
});

webpack.config.base.js

// Common Webpack configuration used by webpack.config.development and webpack.config.production

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const bundletracker = require('webpack-bundle-tracker');

module.exports = {
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, '../build/client'),
        publicPath: '/'
    },
    resolve: {
        modules: [
            path.join(__dirname, '../src/client/scripts'),
            path.join(__dirname, '../src/client/assets'),
            path.join(__dirname, '../src/client/assets/javascripts'),
            'node_modules'
        ],
        alias: {
            models: path.join(__dirname, '../src/client/assets/javascripts/models')
        },
        extensions: ['.js', '.jsx', '.json', '.scss']
    },
    plugins: [
        // Bundle tracker
        new bundletracker({filename: './webpack-stats.json'}),
        new webpack.ProvidePlugin({
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'  // fetch API
        }),
        // Shared code
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'js/vendor.bundle.js',
            minChunks: Infinity
        }),
    ],
    module: {
        rules: [
            {
                // JavaScript / ES6
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        include: path.resolve(__dirname, '../src/client/assets/javascripts'),
                    }
                }
            },
            {
                // Images
                // Inline base64 URLs for <=8k images, direct URLs for the rest
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'images/[name].[ext]?[hash]'
                    }
                }
            },
            {
                // Fonts
                test: /\.(woff|woff2|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'fonts/[name].[ext]?[hash]'
                    }
                }
            }
        ]
    },
    postcss: function () {
        return [
            autoprefixer({
                browsers: ['last 2 versions']
            })
        ];
    }
};

webpack.config.development.js

const merge = require('webpack-merge');
const webpack = require('webpack');
const config = require('./webpack.config.base');
const path = require('path');


const GLOBALS = {
    'process.env': {
        'NODE_ENV': JSON.stringify('development')
    },
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'true'))
};

module.exports = merge(config, {
    debug: true,
    cache: true,
    devtool: 'cheap-module-eval-source-map',
    entry: {
        application: [
            'webpack-hot-middleware/client',
            'react-hot-loader/patch',
            'development'
        ],
        vendor: ['react', 'react-dom', 'react-redux', 'react-router', 'react-router-redux', 'redux']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin(GLOBALS)
    ],
    module: {
        rules: [
            {
                // Sass
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            include: [
                                path.resolve(__dirname, '../src/client/assets/javascripts'),
                                path.resolve(__dirname, '../src/client/assets/styles'),
                                path.resolve(__dirname, '../src/client/scripts')
                            ],
                            sourceMap: true,
                            outputStyle: 'expanded'
                        }
                    }
                ]

            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                ]
            }

            // Sass + CSS Modules
            // {
            //   test: /\.scss$/,
            //   include: /src\/client\/assets\/javascripts/,
            //   loaders: [
            //     'style',
            //     {
            //       loader: 'css',
            //       query: {
            //         modules: true,
            //         importLoaders: 1,
            //         localIdentName: '[path][name]__[local]--[hash:base64:5]'
            //       }
            //     },
            //     'postcss',
            //     { loader: 'sass', query: { outputStyle: 'expanded' } }
            //   ]
            // },
            // CSS
        ]
    }
});