webpack.config.js

import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const PORT = process.env.PORT || 8888;
const HOST = process.env.HOST || 'localhost';

const config = {
  entry: {
    app: [
      './src/app.js',
      `webpack-dev-server/client?http://${ HOST }:${ PORT }`,
      'webpack/hot/only-dev-server',
    ],
    vendor: ['react', 'react-dom', 'react-router', 'redux', 'bluebird', 'immutable', 'moment'],
  },

  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js',
  },

  cache: true,
  devtool: 'eval',

  performance: {
    hints: false,
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor'),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        ENDPOINT: JSON.stringify(process.env.ENDPOINT || 'development'),
      },
    }),
    new HtmlWebpackPlugin({
      environment: 'dev',
      favicon: 'src/assets/favicon.ico',
      filename: 'index.html',
      template: 'src/index.html.tpl',
      title: 'Optimizer 2 (Dev)',
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('autoprefixer'),
          require('postcss-nested'),
        ],
      }
    }),
  ],

  resolve: {
    modules: [
      'src',
      'node_modules'
    ],
    extensions: ['.js', '.jsx'],
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader',
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!postcss-loader!less-loader',
      },
      {
        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
        }
      },
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, '../src'),
        loaders: 'babel-loader',
      },
    ],
  },
};

export default config;

webpack.dist.config.js

import path from 'path';
import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const config = {

  entry: {
    app: [
      './src/app.js',
    ],
    vendor: ['react', 'react-dom', 'react-router', 'redux', 'bluebird', 'immutable', 'moment'],
  },

  output: {
    path: './dist/',
    filename: '[name].[hash].js',
  },

  cache: true,
  devtool: 'cheap-source-map',

  stats: {
    colors: true,
    reasons: false,
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor'),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production'),
        ENDPOINT: JSON.stringify(process.env.ENDPOINT || 'production'),
      },
    }),
    new webpack.optimize.UglifyJsPlugin({
      mangle: {
        screw_ie8: true
      },
      output: {
        comments: false,
        screw_ie8: true
      },
      compress: {
        warnings: false
      },
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new ExtractTextPlugin('[name].[hash].css'),
    new HtmlWebpackPlugin({
      environment: 'production',
      favicon: 'src/assets/favicon.ico',
      filename: 'index.html',
      template: 'src/index.html.tpl',
      title: 'Optimizer 2',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('autoprefixer'),
          require('postcss-nested'),
        ],
      }
    }),
  ],

  resolve: {
    modules: [
      'src',
      'node_modules'
    ],
    extensions: ['.js', '.jsx'],
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: 'css-loader!postcss-loader'
        })
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: 'css-loader!postcss-loader!less-loader'
        })
      },
      {
        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
        }
      },
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, '../src'),
        loaders: 'babel-loader'
      },
    ],
  },
};


export default config;