FRCSTR - Medium Post - Webpack Config

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, 'client'),
  devtool: 'source-map',
  entry: ['webpack/hot/dev-server', './scripts/app.js'],
  output: {
    path: path.resolve(__dirname, 'dist/assets/'),
    filename: 'scripts/bundle.js',
    publicPath: '/assets/'
  },
  resolve: {
    root: path.resolve('./app/scripts'),
    extensions: ['', '.js']
  },
  devServer: {
    contentBase: 'client',
    host: 'localhost',
    port: '9000',
    hot: true,
    inline: true,
    stats: 'errors-only'
  },
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
  plugins: [
    new ExtractTextPlugin('styles/[name].css'),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new CopyWebpackPlugin([
      { from: 'images/', to: 'images/' },
      { from: 'fonts/', to: 'fonts/' }
    ])
  ],
  module: {
    loaders: [
      // js
      {
        test: /\.js$/,
        loaders: ['babel'],
        include: path.join(__dirname, 'client')
      },
      // CSS
      {
        test: /\.scss$/,
        include: path.join(__dirname, 'client'),
        loader: ExtractTextPlugin.extract('style', [
          'css?sourceMap',
          'postcss',
          'sass?sourceMap&outputStyle=expanded'
        ].join('!'))
      }, {
        test: /\.(png|jpg|svg|gif|eot|ttf|woff|woff2)$/,
        exclude: /node_modules/,
        loader: 'url-loader'
      }
    ]
  },
  postcss: function() {
    return [autoprefixer({
      browsers: ['last 2 versions']
    })];
  }
};