From 5228616d0979e3903613e04609045440e397d0c9 Mon Sep 17 00:00:00 2001 From: The Big Red Geek Date: Tue, 26 Jan 2016 00:23:49 -0800 Subject: [PATCH] migrated workflow to react-transform --- .babelrc | 5 ++ client/components/MainSection/style.css | 2 +- client/index.html | 4 +- client/index.js | 1 - devServer.js | 34 ++++++++++++ package.json | 15 +++-- webpack.config.dev.js | 61 +++++++++++++++++++++ webpack.config.js => webpack.config.prod.js | 3 +- 8 files changed, 115 insertions(+), 10 deletions(-) create mode 100644 devServer.js create mode 100644 webpack.config.dev.js rename webpack.config.js => webpack.config.prod.js (95%) diff --git a/.babelrc b/.babelrc index 87aaf4b..b32fd5e 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,9 @@ { "presets": ["es2015", "stage-0", "react"], + "env": { + "development": { + "presets": ["react-hmre"] + } + }, "plugins": ["transform-runtime"] } diff --git a/client/components/MainSection/style.css b/client/components/MainSection/style.css index 2cd2e26..4041610 100644 --- a/client/components/MainSection/style.css +++ b/client/components/MainSection/style.css @@ -147,4 +147,4 @@ transform: rotate(90deg); appearance: none; } -} \ No newline at end of file +} diff --git a/client/index.html b/client/index.html index edf5481..0234cb6 100644 --- a/client/index.html +++ b/client/index.html @@ -21,7 +21,7 @@ s.parentNode.insertBefore(wf, s); })(); - - + + diff --git a/client/index.js b/client/index.js index 58a797c..459a34d 100644 --- a/client/index.js +++ b/client/index.js @@ -1,4 +1,3 @@ - import { Router, Route, browserHistory } from 'react-router' import { Provider } from 'react-redux' import ReactDOM from 'react-dom' diff --git a/devServer.js b/devServer.js new file mode 100644 index 0000000..da54afa --- /dev/null +++ b/devServer.js @@ -0,0 +1,34 @@ +var path = require('path'); +var express = require('express'); +var webpack = require('webpack'); +var config = require('./webpack.config.dev'); +var ProgressPlugin = require('webpack/lib/ProgressPlugin'); +var ProgressBar = require('progress'); + +var app = express(); +var compiler = webpack(config); +var bar = new ProgressBar(':bar :message', {total: 100}); + +compiler.apply(new ProgressPlugin(function(percentage, msg) { + bar.update(percentage, { + message: msg + }); +})); + +app.use(require('webpack-dev-middleware')(compiler, { + noInfo: true, + publicPath: config.output.publicPath +})); + +app.use(require('webpack-hot-middleware')(compiler)); + +app.get('*', function(req, res) { + res.sendFile(path.join(__dirname, '/client/index.html')); +}); + +app.listen(3000, 'localhost', function(err) { + if (err) { + console.log(err); + return; + } +}); diff --git a/package.json b/package.json index 4c271f2..c681768 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,10 @@ "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "start": "webpack-dev-server --history-api-fallback --hot --inline --progress --colors --port 3000", - "build": "NODE_ENV=production webpack --progress --colors" + "start": "node devServer.js", + "clean": "rimraf static", + "build:webpack": "cross-env NODE_ENV=production webpack --progress --colors --config webpack.config.prod.js", + "build": "npm run clean && npm run build:webpack" }, "license": "MIT", "devDependencies": { @@ -16,23 +18,28 @@ "babel-plugin-transform-runtime": "^6.3.13", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", + "babel-preset-react-hmre": "^1.0.1", "babel-preset-stage-0": "^6.3.13", "css-loader": "^0.23.1", + "eventsource-polyfill": "^0.9.6", + "express": "^4.13.4", "file-loader": "^0.8.4", "postcss-loader": "^0.8.0", "postcss-modules": "^0.1.3", + "progress": "^1.1.8", + "rimraf": "^2.5.1", "rucksack-css": "^0.8.5", "style-loader": "^0.12.4", "webpack": "^1.12.2", + "webpack-dev-middleware": "^1.5.1", "webpack-dev-server": "^1.12.0", - "webpack-hot-middleware": "^2.2.0" + "webpack-hot-middleware": "^2.6.3" }, "dependencies": { "babel-runtime": "^6.3.19", "classnames": "^2.1.2", "react": "^0.14.0", "react-dom": "^0.14.0", - "react-hot-loader": "^1.3.0", "react-redux": "^4.0.6", "react-router": "^2.0.0-rc5", "redux": "^3.0.2", diff --git a/webpack.config.dev.js b/webpack.config.dev.js new file mode 100644 index 0000000..bd0f189 --- /dev/null +++ b/webpack.config.dev.js @@ -0,0 +1,61 @@ +var rucksack = require('rucksack-css') +var webpack = require('webpack') +var path = require('path') + + +module.exports = { + devtool: 'cheap-module-eval-source-map', + context: path.join(__dirname, './client'), + entry: { + jsx: [ + 'eventsource-polyfill', // necessary for hot reloading with IE + 'webpack-hot-middleware/client', + './index' + ], + html: './index.html', + vendor: ['react'] + }, + output: { + path: path.join(__dirname, 'dist'), + filename: 'bundle.js', + publicPath: '/static/' + }, + module: { + loaders: [ + { + test: /\.html$/, + loader: 'file?name=[name].[ext]' + }, + { + test: /\.css$/, + loaders: [ + 'style-loader', + 'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', + 'postcss-loader' + ] + }, + { + test: /\.jsx?/, + loaders: ['babel'], + exclude: /node_modules/, + include: path.join(__dirname, 'client') + } + ] + }, + resolve: { + extensions: ['', '.js', '.jsx'] + }, + postcss: [ + rucksack({ + autoprefixer: true + }) + ], + plugins: [ + new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin(), + new webpack.DefinePlugin({ + 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') } + }) + ] +} diff --git a/webpack.config.js b/webpack.config.prod.js similarity index 95% rename from webpack.config.js rename to webpack.config.prod.js index 42d9870..14ba0be 100644 --- a/webpack.config.js +++ b/webpack.config.prod.js @@ -28,10 +28,9 @@ module.exports = { ] }, { - test: /\.(js|jsx)$/, + test: /\.jsx?/, exclude: /node_modules/, loaders: [ - 'react-hot', 'babel-loader' ] },