webpack-final.js

import webpack from 'webpack';
import { resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ProgressBarPlugin from 'progress-bar-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import combineLoaders from 'webpack-combine-loaders';
import { getIfUtils, removeEmpty } from 'webpack-config-utils';
import autoprefixer from 'autoprefixer';

export default env => {
  const { ifProd, ifNotProd } = getIfUtils(env);
  return {
    cache: ifProd(),
    // ------------------------------------
    // Entry Points
    // ------------------------------------
    entry: {
      app: [
        'react-hot-loader/patch',
        'babel-polyfill',
        'main.tsx'
      ]
    },

    // ------------------------------------
    // Devtool
    // ------------------------------------
    devtool: ifProd('source-map', 'source-map'),

    // ------------------------------------
    // Resolve
    // ------------------------------------
    resolve: {
      extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
      modules: [
        resolve(__dirname, 'src'),
        resolve(__dirname, 'node_modules')
      ]
    },

    // ------------------------------------
    // Output
    // ------------------------------------
    output: {
      filename: ifProd('bundle.[name].[chunkhash].js', 'bundle.[name].js'),
      path: resolve(__dirname, 'dist'),
      publicPath: '/'
    },

    // ------------------------------------
    // Devserver
    // ------------------------------------
    devServer: {
      historyApiFallback: true,
      stats: {
        chunkModules: false
      },
      port: 3080,
      proxy: {
        '/api': {
          pathRewrite: {'^/api' : ''},
          target: 'http://localhost:3000',
          secure: false
        }
      }
    },

    // ------------------------------------
    // Module
    // ------------------------------------
    module: {
      rules: removeEmpty([
        // JS loader
        {
          test: /\.js$/,
          include: [resolve(__dirname, 'src')],
          enforce: 'pre',
          use: ['source-map-loader']
        },

        // Typescript loader
        {
          test: /\.ts(x?)$/,
          include: [resolve(__dirname, 'src')],
          exclude: /node_modules/,
          use: ['awesome-typescript-loader']
        },

        // Css/Sass loader (non-prod)
        ifNotProd({
          test: /\.scss$/,
          exclude: /node_modules/,
          include: [resolve(__dirname, 'src')],
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]',
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader'
            },
            {
              loader: 'sass-loader'
            }
          ]
        }),

        // Css/Sass loader (prod)
        ifProd({
          test: /\.scss$/,
          exclude: /node_modules/,
          loader: ExtractTextPlugin.extract({
            fallbackLoader: 'style',
            loader: 'css?modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
          })
        }),

        // Image loader
        {
          test: /\.(png|svg|jpg|gif)$/,
          loader: 'url-loader',
          options: {
            name: './assets/images/[name]-[hash].[ext]',
            limit: 100000
          }
        },

        // Font loader
        {
          test: /\.(woff|woff2|eot|ttf|svg)$/,
          include: [resolve(__dirname, 'src/assets/fonts')],
          loader: 'url-loader',
          options: {
            name: './assets/fonts/[name]-[hash].[ext]',
            limit: 100000
          }
        },

        // JSON loader
        {
          test: /\.json$/,
          loader: 'json-loader'
        }
        
    },

    // ------------------------------------
    // Plugins
    // ------------------------------------
    plugins: removeEmpty([
      new ProgressBarPlugin(),

      new HtmlWebpackPlugin({
        template: resolve(__dirname, 'src/index.html')
      }),

      // includes vendor.dll built by webpack.dll.babel.js
      new webpack.DllReferencePlugin({
        context: '.',
        manifest: require('./src/vendor/vendor.json')
      }),

      new ExtractTextPlugin({
        filename: './css/[name]-[hash].css',
        allChunks: true
      }),

      new webpack.LoaderOptionsPlugin({
        test: /\.scss$/,
        options: {
          postCssLoader: {
            sourceMap: true,
            plugins: () => [autoprefixer]
          },
          sassLoader: {
            sourceMap: true,
            includePaths: [resolve(__dirname, 'src/styles')]
          },
          context: '/'
        }
      }),

      // This informs certain dependencies e.g. React that they should be compiled for prod
      // see https://github.com/facebook/react/issues/6479#issuecomment-211784918
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: ifProd('"production"', '"development"')
        }
      }),

      // This file needs to be manually copied to dist since it is a static file not handled by webpack
      new CopyWebpackPlugin([{
        context: resolve(__dirname, 'src/vendor'),
        from: '**/*',
        to: 'vendor',
        copyUnmodified: true
      }]),

      ifProd(new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: true
      })),

      ifProd(new webpack.optimize.MinChunkSizePlugin({
        minChunkSize: 1000
      })),

      ifProd(new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 25
      })),

      ifProd(new webpack.optimize.UglifyJsPlugin({
        compress: {
          screw_ie8: true,
          warnings: false
        },
        sourceMap: true
      }))
    ])
  }
}