webpack.config.ts

// ---------- webpack.config.ts ---------- //
import * as path from "path";
import * as webpack from "webpack";
import * as loaders from "./webpack/loaders";
import { plugins } from "./webpack/plugins";

const config: webpack.Configuration = {
  entry: {
    app: './src/index.tsx',
    styleguide: './styleguide/index.tsx'
  },

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    publicPath: '/',
    sourceMapFilename: '[file].map',
    // chunkFilename: '[id].chunk.js'
  },

  devtool: 'source-map',

  resolve: {
    alias: {
      'react': path.join(__dirname, 'node_modules', 'react')
    },
    extensions: ['*', '.webpack.js', '.web.js', '.tsx', '.ts', '.js']
  },

  plugins,

  devServer: {
    historyApiFallback: { index: '/' },
    stats: "minimal",
    disableHostCheck: true
  },

  module: {
    rules: [
      loaders.tsx,
      loaders.html,
      loaders.cssModules,
      loaders.css,
      loaders.svg,
      loaders.eot,
      loaders.woff,
      loaders.woff2,
      loaders.ttf,
      ...(process.env.NODE_ENV === 'automation' ? [loaders.instrumentTsx] : []),
      ...(process.env.NODE_ENV === 'development' ? [loaders.perf] : [])
    ]
  },

  externals: {
    'cheerio': 'window',
    'react/addons': true,
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true
  }
};

export default config;



// ---------- webpack/plugins.ts ---------- //
import * as webpack from "webpack";

export const tsx: webpack.NewUseRule = {
  test: /\.tsx?$/,
  use: {
    loader: "ts-loader",
    options: {
      compilerOptions: {
        module: "esnext"
      }
    }
  },
  exclude: /node_modules/
};

export const instrumentTsx: webpack.NewUseRule = {
  enforce: "post",
  test: /\.tsx?$/,
  use: {
    loader: "istanbul-instrumenter-loader",
    options: {
      esModules: true
    }
  },
  exclude: /node_modules/
};

export const html: webpack.NewUseRule = {
  test: /\.html$/,
  use: {
    loader: "raw-loader"
  },
  exclude: /node_modules/
};

const globalCssPatterns: RegExp[] = [/node_modules/, /global\.css$/];

export const cssModules: webpack.NewUseRule = {
  test: /\.css$/,
  use: [
    {
      loader: "style-loader",
    },
    {
      loader: "css-loader",
      options: {
        importLoaders: 1,
        modules: true,
        sourceMap: process.env.NODE_ENV === "development",
        camelCase: true,
        localIdentName: "[name]__[local]"
      }
    },
    {
      loader: "postcss-loader"
    }
  ],
  exclude: globalCssPatterns
};

export const css: webpack.NewUseRule = {
  test: /\.css$/,
  use: [
    {
      loader: "style-loader",
    },
    {
      loader: "css-loader"
    },
    {
      loader: "postcss-loader"
    }
  ],
  include: globalCssPatterns
};

export const perf: webpack.NewUseRule = {
  test: require.resolve("react-addons-perf"),
  use: {
    loader: "expose-loader?Perf"
  }
};

export const svg: webpack.NewUseRule = {
  test: /\.svg$/,
  use: {
    loader: "react-svg-inline-loader"
  }
};

const makeUrlLoader = (pattern: RegExp): webpack.NewUseRule => ({
  test: pattern,
  use: {
    loader: "url-loader"
  }
});

export const eot = makeUrlLoader(/\.eot$/);
export const woff = makeUrlLoader(/\.woff$/);
export const woff2 = makeUrlLoader(/\.woff2$/);
export const ttf = makeUrlLoader(/\.ttf$/);





// ---------- webpack/plugins.ts ---------- //
import * as HtmlWebpackPlugin from "html-webpack-plugin";
import * as webpack from "webpack";
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
import * as WebpackVisualizerPlugin from "webpack-visualizer-plugin";

const basePlugins: webpack.Plugin[] = [
  new webpack.DefinePlugin({
    __DEV__: process.env.NODE_ENV !== 'production',
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }),
  new HtmlWebpackPlugin({
    template: './src/index.html',
    inject: 'body',
    excludeChunks: ['styleguide']
  }),
  new HtmlWebpackPlugin({
    template: './styleguide/index.html',
    inject: 'body',
    filename: 'styleguide/index.html',
    excludeChunks: ['app']
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks(module, count) {
      return module.resource && module.resource.indexOf('node_modules') !== -1
    }
  }),
  new webpack.optimize.CommonsChunkPlugin({
    children: true,
    async: true,
    minChunks: 2
  })
];

const getDevPlugins = (): webpack.Plugin[] => [
  new BundleAnalyzerPlugin({
    analyzerMode: 'server',
  })
];

const getProdPlugins = (): webpack.Plugin[] => [
  new WebpackVisualizerPlugin({
    filename: './stats/index.html'
  }),
  new webpack.optimize.ModuleConcatenationPlugin(),
  new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false
  }),
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true
  })
];

export const plugins = basePlugins
  .concat(process.env.NODE_ENV === 'production' ? getProdPlugins() : [])
  .concat(process.env.NODE_ENV === 'development' ? getDevPlugins() : []);