marcandrewb
3/20/2015 - 2:01 PM

My webpack config

My webpack config

var webpack = require('webpack'),
    ExtractText = require('extract-text-webpack-plugin'),
    isProduction = process.env.NODE_ENV === 'production';

// Base config
//
var webpackCfg = {
  entry: {
    'client': './client/js/client.js',
  },
  output: {
    // __dirname is the path of webpack.js
    path: __dirname + '/../build',
    filename: ( isProduction ? '[hash].js' : 'client.js')
  },
  module: {
    loaders: [
      {
        test: /\.styl$/,
        loader: ExtractText.extract("css?sourceMap!stylus")
      },
      {
        test: /\.(?:jpg|png|gif|eot|svg|ttf|woff|otf)$/,
        loader: "file-loader"
      },
      {
        test: /\.jsx$/, loader: "babel-loader"
      },
      {
        test: /common\/.+\.js$/, loader: 'babel-loader'
      },
      {
        test: /client\/js\/.+\.js$/, loader: 'babel-loader', exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new ExtractText( isProduction ? "[hash].css" : "client.css" )
  ],
  debug: !isProduction,
  externals: {
  }
};

// Other env-based configs
//
if( isProduction ){
  webpackCfg.plugins.push(new webpack.optimize.UglifyJsPlugin({
    sourceMap: false
  }));
}else{
  webpackCfg.devtool = '#source-map';

  // Hot module replacement setup
  // Ref:
  // http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server
  // http://gaearon.github.io/react-hot-loader/#enabling-hot-module-replacement
  //
  // https://gist.github.com/tomchentw/7aaeb427703c4d15705d
  //
  webpackCfg.entry.client = [
    // "?/" instructs socket.io inside webpack-dev-server/client to connect to '/'
    'webpack-dev-server/client?/',
    'webpack/hot/dev-server',
    webpackCfg.entry.client
  ];
  webpackCfg.plugins.push(new webpack.HotModuleReplacementPlugin());
  webpackCfg.output.publicPath = '/build/'
}

module.exports = webpackCfg;
// Webpack development server with hot module replacement enabled
// Ref: http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server
//
var serverCfg = require('./config');

if(process.env.NODE_ENV !== 'production') {
  var WebpackDevServer = require("webpack-dev-server"),
      webpackCfg = require("../client/config/webpack"),
      webpack = require("webpack");
  (new WebpackDevServer(webpack(webpackCfg), {
    publicPath: "/build/",
    contentBase: {target: serverCfg.koaServerHostWithPort},
    hot: true,
    watchDelay: 2000 // Wait for nodemon to restart server
  })).listen(serverCfg.webpackDevServerPort, '0.0.0.0', function(){
    console.log(`Webpack-dev-server listening at http://0.0.0.0:${serverCfg.webpackDevServerPort}`);
  });
}