{
"presets": ["stage-2", "es2015", "react"],
"plugins": [
"react-hot-loader/babel",
"transform-decorators-legacy",
"typecheck",
"syntax-flow",
"transform-flow-strip-types",
"transform-async-to-generator"
],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
import express from 'express';
import webpack from 'webpack';
import favicon from 'serve-favicon';
import path from 'path';
import config from '../webpack.config.dev';
import open from 'open';
/* eslint-disable no-console */
const port = 3000;
const webPackPort = 3001;
const app = express();
const compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use(favicon(__dirname + '/../src/assets/img/favicon.ico'));
app.get('*', function(req, res) {
res.sendFile(path.join( __dirname, '../src/index.html'));
});
app.listen(port, function(err) {
if (err) {
console.log(err);
} else {
open(`http://localhost:${webPackPort}`);
}
});
import WebpackDevServer from 'webpack-dev-server';
new WebpackDevServer(webpack(config), {
hot: true,
historyApiFallback: true,
proxy: {
"*": "http://localhost:3000"
}
}).listen(3001, 'localhost', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3001');
});
import webpack from 'webpack';
import path from 'path';
export default {
debug: true,
devtool: 'cheap-module-eval-source-map',
noInfo: false,
entry: [
'babel-polyfill',
'eventsource-polyfill', // necessary for hot reloading with IE
//'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3001',
'webpack/hot/only-dev-server',
'./src/index'
],
target: 'web',
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './src'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{test: /(\.css)$/, loaders: ['style', 'css']},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
{test: /\.(woff|woff2|png|jpe?g|gif|ico)(\?\S*)?$/, loader: 'url?limit=100000&name=[name].[ext]'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=100000&mimetype=application/octet-stream"},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=100000&mimetype=image/svg+xml"}
]
}
};
[...]
import { AppContainer } from 'react-hot-loader';
import ProviderApp from './ProviderApp';
render(
<AppContainer>
<ProviderApp/>
</AppContainer>,
document.getElementById('app')
);
if (module.hot) {
module.hot.accept('./ProviderApp', () => {
const NextRoot = require('./ProviderApp').default;
render(
<AppContainer>
<NextRoot/>
</AppContainer>,
document.getElementById('app')
);
});
}
Please feel free to delete this post if you are not interested in the subject.. :)
Anyway it took me 2-3 weeks to get here so I thaught it would be usefull to share the answer.. :)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent