Default #new

const path = require('path');

const { CommonsChunkPlugin, OccurrenceOrderPlugin } = require('webpack').optimize;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry : {
    'app': './src/main'
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  resolve: {
    extensions: ['.js', '.ts']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader',
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        loader: 'raw-loader',
      },
      {
        test: /\.css$/,
        loaders: ['to-string-loader'].concat(ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?sourceMap',
          publicPath: '../../styles/'
        }))
        // loaders: ['to-string-loader', 'style-loader', 'css-loader']
      },
      { // test 내에 정의된 확장자를 발견하면 file-loader를 정의하여 output에 정의된 경로로 해당 파일을 복사
        test: /\.(eot|svg|cur)$/,
        loader: 'file-loader?publicPath=./&name=[name].[ext]?[hash:20]'
      },
      { // 작은 이미지나 글꼴 파일은 복사하지 않고 문자열 형태로 변환하여 번들 파일에 추가, Data URI Scheme을 이용하는 것
        test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
        loader: 'url-loader?publicPath=./&name=[name].[ext]?[hash:20]&limit=10000'
      },
    ]
  },

  plugins: [
    // vendor 파일과 main 파일에서 중복되는 부분은 따로 추출해서 번들링
    // new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }),
    new CompressionPlugin({ regExp: /\.css$|\.html$|\.js$|\.map$/ }),       // 번들링 결과물을 gzip 으로 압축
    new CopyWebpackPlugin([{ from: './src/index.html', to: 'index.html'}]), // index 파일 dist로 복사
    new OccurrenceOrderPlugin(true),    // webpack 모듈의 id를 숫자로 변경
    new ExtractTextPlugin("styles.css")
  ],

  devServer: {
    contentBase: 'src', //webpack-dev-server 서버의 기본 주소를 src 폴더로 설정
    historyApiFallback: true,
    stats: {  // webpack-dev-server 로그 설정, 여기서는 번들링에 대한 부분과 경고 메시지를 생략
      maxModules: 0,
      warnings: false
    },
    port: 19999
  },

  devtool: 'source-map',  // 소스맵 생성

  stats: {  // webpack 로그 설정
    maxModules: 0,
    warnings: false
  }
};

Default #old

const path = require('path');

const { CommonsChunkPlugin, OccurrenceOrderPlugin } = require('webpack').optimize;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry : {
    'app': './src/main'
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  resolve: {
    extensions: ['.js', '.ts']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader',
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        loader: 'raw-loader',
      },
      {
        test: /\.css$/,
        loaders: ['to-string-loader', 'style-loader', 'css-loader']
      },
      {
        test: /\.(eot|svg|cur)$/,
        loader: 'file-loader'
      },
      {
        test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
        loader: 'url-loader'
      },
    ]
  },

  plugins: [
    // vendor 파일과 main 파일에서 중복되는 부분은 따로 추출해서 번들링
    // new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }),
    new CompressionPlugin({ regExp: /\.css$|\.html$|\.js$|\.map$/ }),       // 번들링 결과물을 gzip 으로 압축
    new CopyWebpackPlugin([{ from: './src/index.html', to: 'index.html'}]), // index 파일 dist로 복사
    new OccurrenceOrderPlugin(true),    // webpack 모듈의 id를 숫자로 변경
  ],

  devServer: {
    contentBase: 'src', //webpack-dev-server 서버의 기본 주소를 src 폴더로 설정
    historyApiFallback: true,
    stats: {  // webpack-dev-server 로그 설정, 여기서는 번들링에 대한 부분과 경고 메시지를 생략
      maxModules: 0,
      warnings: false
    },
    port: 19999
  },

  devtool: 'source-map',  // 소스맵 생성

  stats: {  // webpack 로그 설정
    maxModules: 0,
    warnings: false
  }
};