sample webpack config

webpack.config.js

import path from 'path';
import webpack from 'webpack';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

const isDev = !(process.env.NODE_ENV === 'production');
const analyze = process.argv.includes('--analyze');
const useMocks = process.argv.includes('--mock');

const config = {
  
  cache: isDev,
  
  context: path.resolve(__dirname),
  
  devtool: isDev ? 'cheap-module-inline-source-map' : 'source-map',
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: isDev ? '[name].js' : '[name].[chunkhash:8].js'
  },
  
  entry: [
    'babel-polyfill',
    ...isDev ? [
      'react-hot-loader/patch',
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
    ] : [],
    './src/index.js',
  ],
  
  name: 'client',

  module: {
    // makes missing exports an error instead of a warning
    strictExportPresence: true,

    rules: [
      {
        test: /\.(js|jsx)$/,
        include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'utils')],
        loader: 'babel-loader',
        options: {
          // https://github.com/babel/babel-loader#options
          cacheDirectory: isDev,
          babelrc: false,
          presets: [
            'es2015',
            'stage-2',
            // https://github.com/babel/babel/tree/master/packages/babel-preset-react
            'react'
          ],
          plugins: [
            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements
            ...(isDev ? ['transform-react-constant-elements'] : []),
            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements
            ...(isDev ? ['transform-react-inline-elements'] : []),
            // https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
            ...(isDev ? ['transform-react-remove-prop-types'] : []),
          ]
        }
      },
      {
        test: /\.css?$/,
        rules: [
          {
            loader: 'style-loader'
          },
          {
            // process external stylesheets
            exclude: path.resolve(__dirname, 'src'),
            loader: 'css-loader',
            options: {
              sourceMap: isDev,
              minimize: isDev ? false : { discardComments: { removeAll: true } }
            }
          },
          {
            include: path.resolve(__dirname, 'src'),
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: isDev,
              localIdentName: isDev ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
              minimize: isDev ? false : { discardComments: { removeAll: true } }
            }
          }
        ]
      },
      {
        test: /\.less?$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'less-loader'
          }
        ]
      }
    ]
  },

  plugins: [

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': isDev ? '"development"' : '"production"',
      'process.env.BROWSER': true,
      __DEV__: true,
      __MOCK__: useMocks ? true : false
    }),
    
    ...analyze ? [new BundleAnalyzerPlugin()] : [],

    ...(isDev
      ? [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
      ]
      : [
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false,
            screw_ie8: true,
            conditionals: true,
            unused: true,
            comparisons: true,
            sequences: true,
            dead_code: true,
            evaluate: true,
            if_return: true,
            join_vars: true
          },
          output: {
            comments: false
          }
        }),
      ]

    )
  ],

  resolve: {
    modules: ['node_modules', 'src', path.resolve(__dirname)]
  },

  target: 'web',
}

export default config;