webpack.config.ts

import * as path from 'path';

import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
import * as AssetsPlugin from 'assets-webpack-plugin';
import * as CompressionPlugin from 'compression-webpack-plugin';
import * as CopyWebpackPlugin from 'copy-webpack-plugin';
import * as ManifestPlugin from 'webpack-manifest-plugin';
import * as webpack from 'webpack';
import { clientConfiguration, serverConfiguration } from 'universal-webpack';
import settings from './universal-webpack-settings';

export default (env?: string) => {
  const mode: string[] = env.split(':');
  process.env.ENV = process.env.NODE_ENV = mode[0];
  const isProd = mode[0] === 'production';

  // Rules/Loaders
  const typescript: webpack.Rule = {
    test: /\.ts(x?)$/,
    use: 'awesome-typescript-loader',
    exclude: /node_modules/
  };
  const styles: webpack.Rule = {
    test: /\.css$/,
    use: [
      { loader: 'style-loader' },
      {
        loader: 'css-loader',
        query: {
          sourceMap: true
        }
      }
    ],
    include: /node_modules/
  };
  const styles2: webpack.Rule = {
    test: /\.css$/,
    use: [
      { loader: 'style-loader' },
      {
        loader: 'css-loader',
        query: {
          localIdentName: '[path][name]---[local]---[hash:base64:5]',
          modules: true,
          sourceMap: true
        }
      }
    ],
    exclude: /node_modules/
  };
  const images: webpack.Rule = {
    test: /\.(jpe?g|png|gif|ico|svg)$/,
    exclude: /node_modules/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'images/[name].[hash:8].[ext]'
    }
  };
  const fonts: webpack.Rule = {
    test: /\.(eof|woff|woff2|ttf|eot)$/,
    exclude: /node_modules/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'fonts/[name].[hash:8].[ext]'
    }
  };
  const json: webpack.Rule = {
    test: /\.json$/,
    use: 'json-loader'
  };

  // Plugins
  const plugins: webpack.Plugin[] = [
    new webpack.optimize.CommonsChunkPlugin('vendor'),
    new ExtractTextPlugin({
      disable: mode[1] === 'server',
      filename: '[hash].css'
    }),
    new AssetsPlugin({
      filename: 'assets.json',
      path: 'build'
    }),
    new CopyWebpackPlugin([{
      from: 'client/assets',
      to: 'assets'
    }]),
    new ManifestPlugin({
      filename: 'manifest.json',
      publicPath: '/static/'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ];

  isProd ? [
    plugins.push(
      new webpack.optimize.UglifyJsPlugin({
        mangle: { screw_ie8: true },
        compress: {
          dead_code: true,
          screw_ie8: true,
          unused: true,
          warnings: false
        }
      }),
      new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
      })
    )
  ] : [
      plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
      )
    ];

  // Base Config
  const baseConfig = (mode?: string[]) => {
    const config: webpack.Configuration = Object.assign({});

    config.entry = {
      main: isProd ? [
        './client'
      ] : [
          'react-hot-loader/patch',
          'webpack-hot-middleware/client',
          './client'
        ],
      vendor: [
        'apollo-client',
        'graphql-anywhere',
        'graphql-tag',
        'react',
        'react-apollo',
        'react-dom',
        'react-redux',
        'react-router/BrowserRouter',
        'react-router/Link',
        'react-router/Match',
        'react-router/Miss',
        'react-router-redux',
        'redux',
        'redux-thunk'
      ]
    };
    config.output = {
      filename: isProd ? 'js/[name].[chunkhash:8].js' : 'js/[name].js',
      path: path.resolve(__dirname, 'build/static'),
      publicPath: '/static/'
    };
    config.module = {
      rules: [
        typescript,
        styles,
        styles2,
        images,
        fonts,
        json
      ]
    };
    config.plugins = [
      ...plugins
    ];

    config.devtool = isProd ? 'source-map' : 'cheap-module-source-map';
    config.resolve = {
      alias: {
        client: path.resolve(__dirname, './client/components'),
        components: path.resolve(__dirname, './client/components'),
        config: path.resolve(__dirname, './config'),
        server: path.resolve(__dirname, './server')
      },
      extensions: ['.tsx', '.ts', '.js', '.css']
    };
    config.bail = isProd;
    config.stats = {
      children: false
    };
    return config;
  };

  switch (mode[1]) {
    case 'client': {
      const returnConfig = clientConfiguration(baseConfig(), settings);
      return returnConfig;
    }
    case 'server': {
      return console.log(serverConfiguration(baseConfig(), settings));
    }
    default: {
      return baseConfig();
    }
  }
};