Skip to content

Instantly share code, notes, and snippets.

@aethant
Forked from TylerK/index.js
Created February 11, 2017 06:16
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aethant/3b534d8a9ce3b7c9331b8f4e93c07fcc to your computer and use it in GitHub Desktop.
Save aethant/3b534d8a9ce3b7c9331b8f4e93c07fcc to your computer and use it in GitHub Desktop.
React Router 4, React -> Preact for production, Async route-based code-splitting.
import React from 'react'
import { render } from 'react-dom';
import { Router, Route } from 'react-router-dom';
import LazyRoute from 'lazy-route';
const App = () => {
render() {
return (
<Router>
<Route
exact
path="/"
render={(props) => (
<LazyRoute
{...props}
component={System.import('pages/home')}
/>
)}
/>
<Route
path="/about"
render={(props) =>(
<LazyRoute
{...props}
component={System.import('pages/about')}
/>
)}
/>
<Route
path="/work"
render={(props) => (
<LazyRoute
{...props}
component={System.import('pages/work')}
/>
)}
/>
</Router>
);
}
}
render(<App />, document.getElementById('root'));
{
"name": "stuff_and_things",
"version": "1.0.0",
"description": "This is where the magic happens",
"scripts": {
"build": "rimraf ./dist && NODE_ENV=production webpack --progress -p",
"dev": "NODE_ENV=development webpack-dev-server --inline",
},
"author": "Tyler Kelley – @_tkwd",
"license": "Do what you will, but credit me with a lymric.",
"dependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-jest": "^16.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-class-properties": "^6.16.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.16.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.25.0",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.22.0",
"imports-loader": "^0.6.5",
"lazy-route": "^1.0.7",
"preact": "^7.2.0",
"preact-compat": "^3.13.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "4.0.0-beta.3",
"react-router-dom": "4.0.0-beta.5",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.2.1",
"webpack-dev-server": "^2.3.0",
"webpack-merge": "^0.14.1",
}
}
/* eslint-disable */
const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const src = path.resolve(__dirname, 'src');
const dist = path.resolve(__dirname, 'dist');
const isProduction = process.env.NODE_ENV === 'production';
/**
* Base
*/
const baseConfig = {
entry: {
app: `${src}/index.js`,
},
output: {
path: dist,
filename: '[name].[chunkhash].js',
},
resolve: {
extensions: ['.js', '.json', '.css'],
modules: [src, 'node_modules'],
},
module: {
rules: [
{
test: /\.js?$/,
include: [src],
exclude: ['node_modules'],
loader: 'babel-loader'
},
{
test: /\.css?$/,
include: [src],
exclude: ['node_modules'],
loader: ['style-loader', 'css-loader']
},
{
test: /\.(bmp|gif|png|jpg|jpeg|svg)?$/,
loader: ['url-loader?limit=1024'],
}
],
},
plugins: [
new webpack.ProvidePlugin({
fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
}),
new webpack.NoEmitOnErrorsPlugin(),
]
};
/**
* Development
*/
const developmentConfig = merge.smart(baseConfig, {
cache: true,
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack/hot/only-dev-server',
'./src/index.js',
],
output: {
filename: 'app.js',
path: path.resolve(__dirname, '/dist'),
publicPath: '/dist',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
],
devServer: {
compress: true,
historyApiFallback: {
index: '/'
},
host: 'somedomain.com',
hot: true,
port: 3000,
stats: { colors: true },
}
});
/**
* Production
*/
const productionConfig = merge.smart(baseConfig, {
entry: {
vendors: [
'react-redux',
'react-router',
'redux',
]
},
output: {
filename: '[name].[hash].js',
chunkFilename: '[name].[chunkhash].js'
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.NamedModulesPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(true),
new webpack.LoaderOptionsPlugin({
debug: false,
minimize: true,
}),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors.[hash].js',
minChunks: Infinity,
}),
new HtmlWebpackPlugin({
template: 'production.html',
inject: true,
hash: false,
}),
new ExtractTextPlugin('styles.[hash].css'),
],
resolve: {
alias: {
'react': 'preact-compat/dist/preact-compat',
'react-dom': 'preact-compat/dist/preact-compat',
}
}
});
module.exports = isProduction ? productionConfig : developmentConfig;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment