angular-2-webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: { // in this case we have three entry points in order to import three separate files for our build
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts' 
  },

  resolve: {
    extensions: ['', '.ts', '.js'] // specify which extensions you want to resolve to modules
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader'] // load typescript and angular typescript modules
      },
      {
        test: /\.html$/,
        loader: 'html'
      }, // this loads the html into components for Angular
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]' // this loads the files into asset folder
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap') // this grabs all .css files and addes a link tag to the index
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),
    new webpack.NoErrorsPlugin(), // if error in build - throw error code and fail
    new webpack.optimize.DedupePlugin(), // gets rid of duplicate code. 
    new webpack.optimize.UglifyJsPlugin({ // this minifies and deletes unnecessary code
      mangle: {
        keep_fnames: true
      }
    }),
    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    }),
    new HtmlWebpackPlugin({ // this specifies your index.html and uses it as a base for a newly generated template
      template: 'src/index.html'
    })
  ]
};