webpack.js

var path = require('path');
var suit = require('suitcss-preprocessor');
var rework = require('rework-webpack-loader');
var vars = require('rework-vars');
var webpack = require('webpack');

// hack to unbreak https://github.com/aaronj1335/rework-webpack-loader/blob/master/lib/plugins/urls.js#L41
var urlParse = require('url').parse;
var mark = require('rework-webpack-loader/lib/mark');
rework.plugins.urls.processJs = function(js) {
  return js.replace(mark.re, function(_, url) {
    var parsed = urlParse(url);
    var rest = (parsed.query || '') + (parsed.hash || '');

    return '" + require(' + JSON.stringify(parsed.pathname) + ') + "' + rest;
  });
};


/**
 * @param {Object} options
 * @param {boolean} options.hotloader
 * @param {string} options.env development | production
 */
module.exports = function(options) {
  var HOT_SERVER = function(port) {
    if (options.hotloader === false) return [];

    if (typeof port === 'undefined') throw new Error('Hot Server port must be defined');

    return [
      'webpack-dev-server/client?http://0.0.0.0:' + port,
      'webpack/hot/only-dev-server',
    ];
  };

  return {
    cache: true,
    context: path.join(__dirname, 'src'),
    entry: {
      bundle: HOT_SERVER(3000).concat('./routes'),
    },

    output: {
      path: path.join(__dirname, 'dist'),
      filename: '[name].js',
      publicPath: 'http://localhost:3000/dist/'
    },

    resolve: {
      // extensions: ['', '.js', '.jsx']
    },

    module: {
      loaders: [
        {test: /\.css$/, loader: 'style!rework-webpack'},
        {test: /\.jsx?$/,
          exclude: [
            // exclude everything that isn’t a react- component
            /node_modules(?!\/react-)/
          ],
          loaders:
            // TODO: this isn’t quite right
            [options.autodoc && 'esprima'].concat(
            [options.hotloader && 'react-hot'].concat(
            ['babel?experimental&optional=selfContained']))
        },

        {test: /\.png$/, loader: 'file?mimetype=image/png'},
        {test: /\.jpg$/, loader: 'file?mimetype=image/jpeg'},
        {test: /\.webp$/, loader: 'file?mimetype=image/webp'},
        {test: /\.gif$/, loader: 'file?mimetype=image/gif'},
        /*
        {test: /\.png$/, loader: 'url-loader?limit100000&mimetype=image/png'},
        {test: /\.jpg$/, loader: 'url-loader?limit100000&mimetype=image/jpeg'},
        {test: /\.webp$/, loader: 'url-loader?limit100000&mimetype=image/webp'},
        {test: /\.gif$/, loader: 'url-loader?limit100000&mimetype=image/gif'},
      */
      ]
    },

    plugins: (options.hotloader ? [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ] : []).concat([
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(options.env || 'development')
      })
    ]),

    rework: {
      use: [
        rework.plugins.urls,
        vars({map: {
          '--TaskItem-padding': '1.3333rem 0.8333rem',
        }})
      ]
    },

    esprima: {
      transforms: [
        require('react-autodoc/esprima-transformer')
      ]
    }
  };
};