Use webpack hot/dev middlewares

This commit is contained in:
Nicolas Gotchac 2016-11-25 13:14:30 +01:00
parent d188435fd8
commit 24bdf1cb98
7 changed files with 125 additions and 67 deletions

View File

@ -35,7 +35,7 @@
"ci:build:dll": "NODE_ENV=production webpack --config webpack/vendor", "ci:build:dll": "NODE_ENV=production webpack --config webpack/vendor",
"ci:build:npm": "NODE_ENV=production webpack --config webpack/npm", "ci:build:npm": "NODE_ENV=production webpack --config webpack/npm",
"start": "npm install && npm run build:lib && npm run build:dll && npm run start:app", "start": "npm install && npm run build:lib && npm run build:dll && npm run start:app",
"start:app": "webpack-dev-server --config webpack/config -d --history-api-fallback --open --hot --inline --progress --colors --port 3000", "start:app": "node webpack/dev.server",
"clean": "rm -rf ./build ./coverage", "clean": "rm -rf ./build ./coverage",
"coveralls": "npm run testCoverage && coveralls < coverage/lcov.info", "coveralls": "npm run testCoverage && coveralls < coverage/lcov.info",
"lint": "eslint --ignore-path .gitignore ./src/", "lint": "eslint --ignore-path .gitignore ./src/",
@ -80,6 +80,7 @@
"eslint-plugin-promise": "~2.0.0", "eslint-plugin-promise": "~2.0.0",
"eslint-plugin-react": "~5.1.1", "eslint-plugin-react": "~5.1.1",
"eslint-plugin-standard": "~2.0.0", "eslint-plugin-standard": "~2.0.0",
"express": "~4.14.0",
"extract-loader": "0.0.2", "extract-loader": "0.0.2",
"extract-text-webpack-plugin": "~1.0.1", "extract-text-webpack-plugin": "~1.0.1",
"file-loader": "~0.8.5", "file-loader": "~0.8.5",
@ -88,6 +89,7 @@
"history": "~2.0.0", "history": "~2.0.0",
"html-loader": "~0.4.4", "html-loader": "~0.4.4",
"html-webpack-plugin": "~2.24.1", "html-webpack-plugin": "~2.24.1",
"http-proxy-middleware": "~0.17.2",
"husky": "~0.11.9", "husky": "~0.11.9",
"ignore-styles": "2.0.0", "ignore-styles": "2.0.0",
"image-webpack-loader": "~1.8.0", "image-webpack-loader": "~1.8.0",
@ -115,7 +117,7 @@
"style-loader": "~0.13.0", "style-loader": "~0.13.0",
"url-loader": "~0.5.7", "url-loader": "~0.5.7",
"webpack": "~1.13.2", "webpack": "~1.13.2",
"webpack-dev-server": "~1.15.2", "webpack-dev-middleware": "~1.8.4",
"webpack-error-notification": "0.1.6", "webpack-error-notification": "0.1.6",
"webpack-hot-middleware": "~2.13.2", "webpack-hot-middleware": "~2.13.2",
"websocket": "~1.0.23" "websocket": "~1.0.23"

View File

@ -128,9 +128,15 @@ export default class DappsStore {
} }
_getHost (api) { _getHost (api) {
return process.env.NODE_ENV === 'production' const host = process.env.DAPPS_URL || (process.env.NODE_ENV === 'production'
? this._api.dappsUrl ? this._api.dappsUrl
: ''; : '');
if (host === '/') {
return '';
}
return host;
} }
_fetchBuiltinApps () { _fetchBuiltinApps () {

View File

@ -15,7 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
// test only // test only
/** /**
* Run `PARITY_URL="127.0.0.1:8180" NODE_ENV="production" npm run build` * Run `DAPPS_URL="/" PARITY_URL="127.0.0.1:8180" NODE_ENV="production" npm run build`
* to build the project ; use this server to test that the minifed * to build the project ; use this server to test that the minifed
* version is working (this is a simple proxy server) * version is working (this is a simple proxy server)
*/ */
@ -23,39 +23,17 @@
var express = require('express'); var express = require('express');
var proxy = require('http-proxy-middleware'); var proxy = require('http-proxy-middleware');
var Shared = require('./shared');
var app = express(); var app = express();
var wsProxy = proxy('ws://127.0.0.1:8180', { changeOrigin: true }); var wsProxy = proxy('ws://127.0.0.1:8180', { changeOrigin: true });
Shared.addProxies(app);
app.use(express.static('.build')); app.use(express.static('.build'));
app.use('/api/*', proxy({
target: 'http://127.0.0.1:8080',
changeOrigin: true
}));
app.use('/app/*', proxy({
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/app': ''
}
}));
app.use('/parity-utils/*', proxy({
target: 'http://127.0.0.1:3000',
changeOrigin: true,
pathRewrite: {
'^/parity-utils': ''
}
}));
app.use('/rpc/*', proxy({
target: 'http://127.0.0.1:8080',
changeOrigin: true
}));
app.use(wsProxy); app.use(wsProxy);
var server = app.listen(3000); var server = app.listen(process.env.PORT || 3000, function () {
console.log('Listening on port', server.address().port);
});
server.on('upgrade', wsProxy.upgrade); server.on('upgrade', wsProxy.upgrade);

View File

@ -40,6 +40,7 @@ module.exports = {
index: './index.js' index: './index.js'
}), }),
output: { output: {
publicPath: '/',
path: path.join(__dirname, '../', DEST), path: path.join(__dirname, '../', DEST),
filename: '[name].[hash].js' filename: '[name].[hash].js'
}, },
@ -145,13 +146,5 @@ module.exports = {
} }
return plugins; return plugins;
}()), }())
devServer: {
contentBase: path.resolve(__dirname, `../${DEST}`),
historyApiFallback: false,
quiet: false,
hot: !isProd,
proxy: Shared.proxies
}
}; };

68
js/webpack/dev.server.js Normal file
View File

@ -0,0 +1,68 @@
// Copyright 2015, 2016 Ethcore (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const http = require('http');
const express = require('express');
const webpackConfig = require('./config');
const Shared = require('./shared');
const hotMiddlewareScript = 'webpack-hot-middleware/client';
/**
* Add webpack hot middleware to each entry in the config
* and HMR to the plugins
*/
(function updateWebpackConfig () {
Object.keys(webpackConfig.entry).forEach((key) => {
const entry = webpackConfig.entry[key];
webpackConfig.entry[key] = [].concat(entry, hotMiddlewareScript);
});
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
webpackConfig.plugins.push(new webpack.NoErrorsPlugin());
})();
const app = express();
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
noInfo: false,
quiet: false,
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true
}
}));
app.use(webpackHotMiddleware(compiler, {
log: console.log
}));
app.use(express.static(webpackConfig.output.path));
// Add the dev proxies in the express App
Shared.addProxies(app);
const server = http.createServer(app);
server.listen(process.env.PORT || 3000, function () {
console.log('Listening on port', server.address().port);
});

View File

@ -46,18 +46,26 @@ function getPlugins (_isProd = isProd) {
] ]
}), }),
new HappyPack({
id: 'babel',
threads: 4,
loaders: ['babel']
}),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': { 'process.env': {
NODE_ENV: JSON.stringify(ENV), NODE_ENV: JSON.stringify(ENV),
RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS), RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
PARITY_URL: JSON.stringify(process.env.PARITY_URL), PARITY_URL: JSON.stringify(process.env.PARITY_URL),
DAPPS_URL: JSON.stringify(process.env.DAPPS_URL),
LOGGING: JSON.stringify(!isProd) LOGGING: JSON.stringify(!isProd)
} }
}) }),
new webpack.optimize.OccurrenceOrderPlugin(!_isProd)
]; ];
if (_isProd) { if (_isProd) {
plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
plugins.push(new webpack.optimize.DedupePlugin()); plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.UglifyJsPlugin({ plugins.push(new webpack.optimize.UglifyJsPlugin({
screwIe8: true, screwIe8: true,
@ -97,47 +105,48 @@ const postcss = [
}) })
]; ];
const proxies = [ function addProxies (app) {
{ const proxy = require('http-proxy-middleware');
context: (pathname, req) => {
return pathname === '/' && req.method === 'HEAD'; app.use(proxy((pathname, req) => {
}, return pathname === '/' && req.method === 'HEAD';
}, {
target: 'http://127.0.0.1:8180', target: 'http://127.0.0.1:8180',
changeOrigin: true, changeOrigin: true,
autoRewrite: true autoRewrite: true
}, }));
{
context: '/api', app.use('/api', proxy({
target: 'http://127.0.0.1:8080', target: 'http://127.0.0.1:8080',
changeOrigin: true, changeOrigin: true,
autoRewrite: true autoRewrite: true
}, }));
{
context: '/app', app.use('/app', proxy({
target: 'http://127.0.0.1:8080', target: 'http://127.0.0.1:8080',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/app': '' '^/app': ''
} }
}, }));
{
context: '/parity-utils', app.use('/parity-utils', proxy({
target: 'http://127.0.0.1:3000', target: 'http://127.0.0.1:3000',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/parity-utils': '' '^/parity-utils': ''
} }
}, }));
{
context: '/rpc', app.use('/rpc', proxy({
target: 'http://127.0.0.1:8080', target: 'http://127.0.0.1:8080',
changeOrigin: true changeOrigin: true
} }));
]; }
module.exports = { module.exports = {
getPlugins: getPlugins, getPlugins: getPlugins,
dappsEntry: getDappsEntry(), dappsEntry: getDappsEntry(),
postcss: postcss, addProxies: addProxies,
proxies: proxies postcss: postcss
}; };

View File

@ -29,6 +29,7 @@ let modules = [
'brace', 'brace',
'browserify-aes', 'browserify-aes',
'chart.js', 'chart.js',
'ethereumjs-tx',
'lodash', 'lodash',
'material-ui', 'material-ui',
'mobx', 'mobx',
@ -57,7 +58,8 @@ module.exports = {
}, },
{ {
test: /\.js$/, test: /\.js$/,
loaders: [ 'happypack/loader?id=js' ] include: /(ethereumjs-tx)/,
loaders: [ 'happypack/loader?id=babel' ]
} }
] ]
}, },