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:npm": "NODE_ENV=production webpack --config webpack/npm",
"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",
"coveralls": "npm run testCoverage && coveralls < coverage/lcov.info",
"lint": "eslint --ignore-path .gitignore ./src/",
@ -80,6 +80,7 @@
"eslint-plugin-promise": "~2.0.0",
"eslint-plugin-react": "~5.1.1",
"eslint-plugin-standard": "~2.0.0",
"express": "~4.14.0",
"extract-loader": "0.0.2",
"extract-text-webpack-plugin": "~1.0.1",
"file-loader": "~0.8.5",
@ -88,6 +89,7 @@
"history": "~2.0.0",
"html-loader": "~0.4.4",
"html-webpack-plugin": "~2.24.1",
"http-proxy-middleware": "~0.17.2",
"husky": "~0.11.9",
"ignore-styles": "2.0.0",
"image-webpack-loader": "~1.8.0",
@ -115,7 +117,7 @@
"style-loader": "~0.13.0",
"url-loader": "~0.5.7",
"webpack": "~1.13.2",
"webpack-dev-server": "~1.15.2",
"webpack-dev-middleware": "~1.8.4",
"webpack-error-notification": "0.1.6",
"webpack-hot-middleware": "~2.13.2",
"websocket": "~1.0.23"

View File

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

View File

@ -15,7 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
// 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
* version is working (this is a simple proxy server)
*/
@ -23,39 +23,17 @@
var express = require('express');
var proxy = require('http-proxy-middleware');
var Shared = require('./shared');
var app = express();
var wsProxy = proxy('ws://127.0.0.1:8180', { changeOrigin: true });
Shared.addProxies(app);
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);
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);

View File

@ -40,6 +40,7 @@ module.exports = {
index: './index.js'
}),
output: {
publicPath: '/',
path: path.join(__dirname, '../', DEST),
filename: '[name].[hash].js'
},
@ -145,13 +146,5 @@ module.exports = {
}
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({
'process.env': {
NODE_ENV: JSON.stringify(ENV),
RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
PARITY_URL: JSON.stringify(process.env.PARITY_URL),
DAPPS_URL: JSON.stringify(process.env.DAPPS_URL),
LOGGING: JSON.stringify(!isProd)
}
})
}),
new webpack.optimize.OccurrenceOrderPlugin(!_isProd)
];
if (_isProd) {
plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.UglifyJsPlugin({
screwIe8: true,
@ -97,47 +105,48 @@ const postcss = [
})
];
const proxies = [
{
context: (pathname, req) => {
function addProxies (app) {
const proxy = require('http-proxy-middleware');
app.use(proxy((pathname, req) => {
return pathname === '/' && req.method === 'HEAD';
},
}, {
target: 'http://127.0.0.1:8180',
changeOrigin: true,
autoRewrite: true
},
{
context: '/api',
}));
app.use('/api', proxy({
target: 'http://127.0.0.1:8080',
changeOrigin: true,
autoRewrite: true
},
{
context: '/app',
}));
app.use('/app', proxy({
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/app': ''
}
},
{
context: '/parity-utils',
}));
app.use('/parity-utils', proxy({
target: 'http://127.0.0.1:3000',
changeOrigin: true,
pathRewrite: {
'^/parity-utils': ''
}
},
{
context: '/rpc',
}));
app.use('/rpc', proxy({
target: 'http://127.0.0.1:8080',
changeOrigin: true
}
];
}));
}
module.exports = {
getPlugins: getPlugins,
dappsEntry: getDappsEntry(),
postcss: postcss,
proxies: proxies
addProxies: addProxies,
postcss: postcss
};

View File

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