Webpack vs. React

client:entry.js

// Polyfill ES6 for older browsers
import 'babel/polyfill';

// Trigger globals / methods
import 'simon/client/startup';

import './routes';

client:routes.jsx

/* global ReactRouterSSR, React */

import { Route } from 'react-router';
import routes from 'simon/client/routes'

ReactRouterSSR.Run(
    <Route>
        {routes}
    </Route>
);

client:webpack.conf.js

/* global require, process, module */

var webpack = require('webpack');
var babelSettings = { stage: 0 };

if(process.env.NODE_ENV !== 'production') {
    babelSettings.plugins = ['react-transform'];
    babelSettings.extra = {
        'react-transform': {
            transforms: [{
                transform: 'react-transform-hmr',
                imports: ['react'],
                locals: ['module']
            }, /* {
                transform: 'react-transform-catch-errors',
                imports: ['react' /'redbox-react' ]
            } */
            ]

    }
  };
}

module.exports = {
    entry: './entry',
    module: {
        loaders: [
            { test: /\.jsx?$/, loader: 'babel', query: babelSettings, exclude: /node_modules/ },
            { test: /\.css$/, loader: 'style!css' },
            { test: /\.(png|jpe?g)(\?.*)?$/, loader: 'url?limit=8182' },
            { test: /\.(svg|ttf|woff|eot)(\?.*)?$/, loader: 'file' }
        ]
    }
};

modules:simon:client:app.jsx

/* global require, React */

import { Component, PropTypes } from 'react';

import Main from './components/main';

export default class SimonApp extends Component {
    displayName: "SimonApp"

    static propTypes = {
        children: PropTypes.any
    }

    componentWillMount() {
        require('./css/nv.d3.import.css');
        require('./css/react-select.import.css');
        require('./css/simon.import.css');
    }

    render() {

        return (
            <div>
                {this.props.children? this.props.children : <Main />}
            </div>
        );
    }
}

modules:simon:client:routes.jsx

/* global React */

import { Route, IndexRoute } from 'react-router';
import { Login, ResetPassword, EnrollAccount, ChangePassword } from './components/login';
import { AdminUsers, CreateUser } from './components/users';

import App from './app';

import Main from './components/main';
import Home from './components/home';
import Upload from './components/upload';
import ViewForecast from './components/forecast';
import ViewPeople from './components/people';
import ViewProjects from './components/projects';
import ViewTimeline from './components/timeline';
import ViewUtilization from './components/utilization';


export default (
    <Route path="/" component={App}>

        <Route name="login" path="/login" handler={Login}/>,
        <Route name="resetPassword" path="/reset-password/:token" handler={ResetPassword}/>,
        <Route name="enrollAccount" path="/enroll-account/:token" handler={EnrollAccount}/>,
        <Route name="changePassword" path="/change-password" handler={ChangePassword}/>,

        <Route name="home" handler={Main}>

            <Route name="upload" path="upload" handler={Upload}/>

            <Route name="viewForecast" path="view/forecast" handler={ViewForecast}/>
            <Route name="viewPeople" path="view/people" handler={ViewPeople}/>
            <Route name="viewProjects" path="view/projects" handler={ViewProjects}/>
            <Route name="viewTimeline" path="view/timeline" handler={ViewTimeline}/>
            <Route name="viewUtilization" path="view/utilization" handler={ViewUtilization}/>

            <Route name="adminUsers" path="admin/users" handler={AdminUsers}/>
            <Route name="adminCreateUser" path="admin/create-user" handler={CreateUser}/>

        </Route>
    </Route>
);

modules:simon:client:startup.js

/* global Meteor */
Meteor.subscribe("userData");

packages.json

{
  "babel": "5.8.23",
  "react-mixin": "3.0.0",

  "babel-loader": "5.3.2",
  "null-loader": "0.1.1",
  "url-loader": "0.5.6",
  "file-loader": "0.8.4",
  "style-loader": "0.12.4",
  "css-loader": "0.19.0",
  "style-collector-loader": "0.1.0",
  "script-loader": "0.6.1",

  "webpack-hot-middleware": "2.4.1",
  "babel-plugin-react-transform": "1.1.1",
  "react-transform-hmr": "1.0.1",
  "react-transform-catch-errors": "1.0.0",

  "react-dnd": "2.0.0",
  "react-dnd-html5-backend": "2.0.0",
  "react-bootstrap": "0.27.2",
  "react-select": "0.7.0",
  "react-router": "1.0.0-rc3",
  "react-router-bootstrap": "0.19.2",

  "bootbox": "4.4.0",

  "lodash": "3.10.1",
  "moment": "2.10.6",
  "classnames": "2.2.0",

  "d3": "3.5.6",
  "nvd3": "1.8.1"
}

server:entry.js

/* global process, ReactRouterSSR, Assets, require */
// Polyfill ES6 for Node.js because Meteor doesn't use last version
import 'babel/polyfill';

// Trigger globals / methods
import 'simon/server/startup'


// Do server-rendering only in proudction mode
if (process.env.NODE_ENV === 'production') {
    // Load Webpack infos for SSR
    ReactRouterSSR.LoadWebpackStats(JSON.parse(Assets.getText('webpack.stats.json')));

    require('../client/routes');
}

server:webpack.conf.js

/* global require, module */

var webpack = require('webpack');

module.exports = {
    entry: './entry',
    module: {
        loaders: [
            { test: /\.jsx?$/, loader: 'babel', query: { stage: 0 }, exclude: /node_modules/ },
            { test: /\.css$/, loader: 'style-collector!css' },
            { test: /\.(png|jpe?g)(\?.*)?$/, loader: 'url?limit=8182' },
            { test: /\.(svg|ttf|woff|eot)(\?.*)?$/, loader: 'file' }
        ]
    }
};
  

webpack.conf.js

/* global require, module, __dirname */

var webpack = require('webpack');

module.exports = {
    externals: {
        // Make sure we use Meteor package for react and react-router
        'react': 'React',
        'react-router': 'ReactRouter',
        'jquery': 'jQuery'
    },
    devServer: {
        // You can change this to your server IP address to access it remotely
        host: 'localhost'
    },
    resolve: {
        root: __dirname + '/../modules',
        extensions: ['', '.js', '.jsx', '.json', '.css', '.scss']
    }
};