Lumpy fucked around with this message at 19:00 on Feb 1, 2016

Lumpy fucked around with this message at 21:01 on Mar 6, 2016

//client.js
import routes from './routes';
const target = document.getElementById('root');
ReactDOM.render(
    <Provider store={ store }>
            <Router history={hashHistory} routes={routes} />
    </Provider>,
    target
);


//routes.js
import { App } from '../containers/App';
import LoginForm from '../components/LoginForm';

export default(
    <Route path='/' component={App}>
        <IndexRoute component={LoginForm}/>
    </Route>
);

//App.js
const App = React.createClass({
    render: function () {
        return (
            <div className="mainContentArea">
                <h1>Why isn't this rendered?</h1>
                <p>lolz</p>
                {this.props.children}
            </div> 
        );
    }
});
export default App;


//LoginForm.js
import React from 'react';
export default () => (
        <p>WTF</p>
);

// inside routes.js .....

// original
import { App } from '../containers/App'; /// <-- Lumpy is dumb!

// changed to
import App from '../containers/App'; /// <-- All better

Lumpy fucked around with this message at 17:16 on Mar 11, 2016

rsync_upload: publish
rsync -e "ssh -p $(SSH_PORT)" --exclude-from '$(EXCLUDE_FILE)' -P -rvz 
      --delete $(PRODDIR)/ $(SSH_USER)@$(SSH_HOST):$(SSH_TARGET_DIR) --cvs-exclude

Lumpy fucked around with this message at 17:01 on Jun 21, 2016

• looks at the entry point of my code and gathers up all the imports for me into just what's used
  
• transforms my ES6 to "vanilla" js
  
• transforms my SASS into css
  
• pulls out just the CSS that's actually used
  
• autoprefixes that css
  
• separates out all my "vendor" code (React, d3, whatever) into a separate file so it can be cached (in production)
  
• minifies everything.
  
• writes a new index.html for me with all the SCRIPT and LINK tags for the js /css
  
• hot reloads my browser (in dev)
  

// webpack.config.js
const path    = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer')

const sassLoaders = [
    'style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader?includePaths[]=' + path.resolve(__dirname, './src')
]

module.exports = {
    entry:  [
        'webpack-dev-server/client?[url]http://127.0.0.1:8080/[/url]',
        'webpack/hot/only-dev-server',
        './src/client.js'
    ],
    output: {
        publicPath: "/",
        path:     __dirname,
        filename: 'bundle.js',
    },
    resolve: {
        modulesDirectories: ['node_modules', 'shared'],
        extensions:         ['', '.js', '.jsx']
    },
    module: {
        noParse: [/moment.js/],
        loaders: [
            {
            test:    /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ['react-hot', 'babel']
        },
        {
            test: /\.scss$/,
            loaders: sassLoaders
        },
        { 
            test: /\.(png|jpg)$/,
            loader: 'file-loader?name=[path][hash].[ext]' 
        },

        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    devtool: 'inline-source-map',
};

// devServer.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true,
}).listen(8080, 'localhost', function (err, result) {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:8080');
});

// weboapck.production.js
const path    = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const pkg = require('./package.json');
const deps = Object.keys(pkg.dependencies);


const sassLoaders = [
    'css-loader',
    'postcss-loader',
    'sass-loader?includePaths[]=' + path.resolve(__dirname, './src')
]

module.exports = {
    entry: {
        bundle: './src/client.js',
        vendor: deps
    },
    resolve: {
        modulesDirectories: ['node_modules', 'shared'],
        extensions:         ['', '.js', '.jsx']
    },
    output: {
        path:       path.join(__dirname, 'dist'),
        filename:   '[name].[chunkhash].js',
        chunkFilename: '[chunkhash].js',
        publicPath: '/'
    },
    devtool: 'cheap-module-source-map',
    module: {
        loaders: [
            {
            test:    /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ['babel']
        },
        { 
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract(
                'style-loader',
                sassLoaders
            ) 
        },
        { 
            test: /\.(png|jpg)$/,
            loader: 'file-loader?name=[path][hash].[ext]' 
        },
        ]
    },
    plugins: [
        new ExtractTextPlugin("style.css", {allChunks: false}),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new HtmlWebpackPlugin({
            chunksSortMode: 'dependency',
            title: 'YOUR TITLE HERE',
            template: 'appTemplate.ejs', 
            inject: 'body' 
        }),
    ]
};

NODE_ENV=production webpack -p --progress --colors  --config webpack.production.js

Lumpy fucked around with this message at 14:32 on Aug 15, 2016