Simpler Webpack config : create HTML files for dapps

This commit is contained in:
Nicolas Gotchac 2016-11-24 02:28:33 +01:00
parent f3512967a7
commit 1291130f9e
18 changed files with 153 additions and 231 deletions

View File

@ -47,127 +47,128 @@
"prepush": "npm run lint:cached" "prepush": "npm run lint:cached"
}, },
"devDependencies": { "devDependencies": {
"babel-cli": "^6.10.1", "babel-cli": "~6.10.1",
"babel-core": "^6.10.4", "babel-core": "~6.10.4",
"babel-eslint": "^7.1.0", "babel-eslint": "~7.1.0",
"babel-loader": "^6.2.3", "babel-loader": "~6.2.3",
"babel-plugin-lodash": "^3.2.2", "babel-plugin-lodash": "~3.2.2",
"babel-plugin-transform-class-properties": "^6.11.5", "babel-plugin-transform-class-properties": "~6.11.5",
"babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-decorators-legacy": "~1.3.4",
"babel-plugin-transform-react-remove-prop-types": "^0.2.9", "babel-plugin-transform-react-remove-prop-types": "~0.2.9",
"babel-plugin-transform-runtime": "^6.9.0", "babel-plugin-transform-runtime": "~6.9.0",
"babel-polyfill": "^6.13.0", "babel-polyfill": "~6.13.0",
"babel-preset-es2015": "^6.9.0", "babel-preset-es2015": "~6.9.0",
"babel-preset-es2015-rollup": "^1.1.1", "babel-preset-es2015-rollup": "~1.1.1",
"babel-preset-es2016": "^6.11.3", "babel-preset-es2016": "~6.11.3",
"babel-preset-es2017": "^6.14.0", "babel-preset-es2017": "~6.14.0",
"babel-preset-react": "^6.5.0", "babel-preset-react": "~6.5.0",
"babel-preset-stage-0": "^6.5.0", "babel-preset-stage-0": "~6.5.0",
"babel-register": "6.9.0", "babel-register": "6.9.0",
"babel-runtime": "^6.9.2", "babel-runtime": "~6.9.2",
"chai": "^3.5.0", "chai": "~3.5.0",
"chai-enzyme": "0.4.2", "chai-enzyme": "0.4.2",
"cheerio": "0.20.0", "cheerio": "0.20.0",
"copy-webpack-plugin": "^4.0.0", "copy-webpack-plugin": "~4.0.0",
"core-js": "^2.4.1", "core-js": "~2.4.1",
"coveralls": "^2.11.11", "coveralls": "~2.11.11",
"css-loader": "^0.23.1", "css-loader": "~0.23.1",
"enzyme": "2.3.0", "enzyme": "2.3.0",
"eslint": "^3.1.0", "eslint": "~3.1.0",
"eslint-config-semistandard": "^6.0.2", "eslint-config-semistandard": "~6.0.2",
"eslint-config-standard": "^5.3.5", "eslint-config-standard": "~5.3.5",
"eslint-config-standard-react": "^3.0.0", "eslint-config-standard-react": "~3.0.0",
"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",
"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",
"fs-extra": "^0.30.0", "fs-extra": "~0.30.0",
"happypack": "^2.2.1", "happypack": "~2.2.1",
"history": "^2.0.0", "history": "~2.0.0",
"html-loader": "^0.4.4", "html-loader": "~0.4.4",
"husky": "^0.11.9", "html-webpack-plugin": "~2.24.1",
"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",
"istanbul": "^1.0.0-alpha.2", "istanbul": "~1.0.0-alpha.2",
"jsdom": "9.2.1", "jsdom": "9.2.1",
"json-loader": "^0.5.4", "json-loader": "~0.5.4",
"mocha": "^3.0.0-1", "mocha": "~3.0.0-1",
"mock-local-storage": "1.0.2", "mock-local-storage": "1.0.2",
"mock-socket": "^3.0.1", "mock-socket": "~3.0.1",
"nock": "^8.0.0", "nock": "~8.0.0",
"postcss-import": "^8.1.2", "postcss-import": "~8.1.2",
"postcss-loader": "^0.8.1", "postcss-loader": "~0.8.1",
"postcss-nested": "^1.0.0", "postcss-nested": "~1.0.0",
"postcss-simple-vars": "^3.0.0", "postcss-simple-vars": "~3.0.0",
"raw-loader": "^0.5.1", "raw-loader": "~0.5.1",
"react-addons-perf": "~15.3.2", "react-addons-perf": "~15.3.2",
"react-addons-test-utils": "~15.3.2", "react-addons-test-utils": "~15.3.2",
"react-copy-to-clipboard": "^4.2.3", "react-copy-to-clipboard": "~4.2.3",
"react-dom": "~15.3.2", "react-dom": "~15.3.2",
"react-hot-loader": "~1.3.0", "react-hot-loader": "~1.3.0",
"rucksack-css": "^0.8.6", "rucksack-css": "~0.8.6",
"sinon": "^1.17.4", "sinon": "~1.17.4",
"sinon-as-promised": "^4.0.2", "sinon-as-promised": "~4.0.2",
"sinon-chai": "^2.8.0", "sinon-chai": "~2.8.0",
"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-server": "~1.15.2",
"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"
}, },
"dependencies": { "dependencies": {
"bignumber.js": "^2.3.0", "bignumber.js": "~2.3.0",
"blockies": "0.0.2", "blockies": "0.0.2",
"brace": "^0.9.0", "brace": "~0.9.0",
"bytes": "^2.4.0", "bytes": "~2.4.0",
"chart.js": "^2.3.0", "chart.js": "~2.3.0",
"es6-error": "^4.0.0", "es6-error": "~4.0.0",
"es6-promise": "^3.2.1", "es6-promise": "~3.2.1",
"ethereumjs-tx": "^1.1.2", "ethereumjs-tx": "~1.1.2",
"file-saver": "^1.3.3", "file-saver": "~1.3.3",
"format-json": "^1.0.3", "format-json": "~1.0.3",
"format-number": "^2.0.1", "format-number": "~2.0.1",
"geopattern": "^1.2.3", "geopattern": "~1.2.3",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "~2.2.1",
"js-sha3": "^0.5.2", "js-sha3": "~0.5.2",
"lodash": "^4.11.1", "lodash": "~4.11.1",
"marked": "^0.3.6", "marked": "~0.3.6",
"material-ui": "0.16.1", "material-ui": "0.16.1",
"material-ui-chip-input": "^0.8.0", "material-ui-chip-input": "~0.8.0",
"mobx": "^2.6.1", "mobx": "~2.6.1",
"mobx-react": "^3.5.8", "mobx-react": "~3.5.8",
"mobx-react-devtools": "^4.2.9", "mobx-react-devtools": "~4.2.9",
"moment": "^2.14.1", "moment": "~2.14.1",
"phoneformat.js": "^1.0.3", "phoneformat.js": "~1.0.3",
"qs": "^6.3.0", "qs": "~6.3.0",
"react": "~15.3.2", "react": "~15.3.2",
"react-ace": "^4.0.0", "react-ace": "~4.0.0",
"react-addons-css-transition-group": "~15.3.2", "react-addons-css-transition-group": "~15.3.2",
"react-chartjs-2": "^1.5.0", "react-chartjs-2": "~1.5.0",
"react-dom": "~15.3.2", "react-dom": "~15.3.2",
"react-dropzone": "^3.7.3", "react-dropzone": "~3.7.3",
"react-redux": "^4.4.5", "react-redux": "~4.4.5",
"react-router": "^2.6.1", "react-router": "~2.6.1",
"react-router-redux": "^4.0.5", "react-router-redux": "~4.0.5",
"react-tap-event-plugin": "~1.0.0", "react-tap-event-plugin": "~1.0.0",
"react-tooltip": "^2.0.3", "react-tooltip": "~2.0.3",
"recharts": "^0.15.2", "recharts": "~0.15.2",
"redux": "^3.5.2", "redux": "~3.5.2",
"redux-actions": "^0.10.1", "redux-actions": "~0.10.1",
"redux-thunk": "^2.1.0", "redux-thunk": "~2.1.0",
"rlp": "^2.0.0", "rlp": "~2.0.0",
"scryptsy": "^2.0.0", "scryptsy": "~2.0.0",
"solc": "ngotchac/solc-js", "solc": "ngotchac/solc-js",
"store": "^1.3.20", "store": "~1.3.20",
"utf8": "^2.1.1", "utf8": "~2.1.1",
"valid-url": "^1.0.9", "valid-url": "~1.0.9",
"validator": "^5.7.0", "validator": "~5.7.0",
"web3": "^0.17.0-beta", "web3": "~0.17.0-beta",
"whatwg-fetch": "^1.0.0", "whatwg-fetch": "~1.0.0",
"worker-loader": "^0.7.1" "worker-loader": "~0.7.1"
} }
} }

View File

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/parity-logo-black-no-text.png" type="image/png">
<title>Basic Token Deployment</title>
</head>
<body>
<div id="container"></div>
<script src="vendor.js"></script>
<script src="commons.js"></script>
<script src="/parity-utils/parity.js"></script>
<script src="basiccoin.js"></script>
</body>
</html>

View File

@ -32,7 +32,6 @@ const routerHistory = useRouterHistory(createHashHistory)({});
import '../../assets/fonts/Roboto/font.css'; import '../../assets/fonts/Roboto/font.css';
import '../../assets/fonts/RobotoMono/font.css'; import '../../assets/fonts/RobotoMono/font.css';
import './style.css'; import './style.css';
import './basiccoin.html';
ReactDOM.render( ReactDOM.render(
<Router history={ routerHistory }> <Router history={ routerHistory }>

View File

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/parity-logo-black-no-text.png" type="image/png">
<title>Dapp Registry</title>
</head>
<body>
<div id="container"></div>
<script src="vendor.js"></script>
<script src="commons.js"></script>
<script src="/parity-utils/parity.js"></script>
<script src="dappreg.js"></script>
</body>
</html>

View File

@ -27,7 +27,6 @@ import Application from './dappreg/Application';
import '../../assets/fonts/Roboto/font.css'; import '../../assets/fonts/Roboto/font.css';
import '../../assets/fonts/RobotoMono/font.css'; import '../../assets/fonts/RobotoMono/font.css';
import './style.css'; import './style.css';
import './dappreg.html';
ReactDOM.render( ReactDOM.render(
<Application />, <Application />,

View File

@ -25,7 +25,6 @@ import Application from './githubhint/Application';
import '../../assets/fonts/Roboto/font.css'; import '../../assets/fonts/Roboto/font.css';
import '../../assets/fonts/RobotoMono/font.css'; import '../../assets/fonts/RobotoMono/font.css';
import './style.css'; import './style.css';
import './githubhint.html';
ReactDOM.render( ReactDOM.render(
<Application />, <Application />,

View File

@ -4,13 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/parity-logo-black-no-text.png" type="image/png"> <title><%= htmlWebpackPlugin.options.title %></title>
<title>GitHub Hint</title>
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
<script src="vendor.js"></script> <script src="vendor.js"></script>
<script src="commons.js"></script> <% if (!htmlWebpackPlugin.options.secure) { %>
<script src="githubhint.js"></script> <script src="/parity-utils/parity.js"></script>
<% } %>
</body> </body>
</html> </html>

View File

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/parity-logo-black-no-text.png" type="image/png">
<title>Local transactions Viewer</title>
</head>
<body>
<div id="container"></div>
<script src="vendor.js"></script>
<script src="commons.js"></script>
<script src="/parity-utils/parity.js"></script>
<script src="localtx.js"></script>
</body>
</html>

View File

@ -25,7 +25,6 @@ import Application from './localtx/Application';
import '../../assets/fonts/Roboto/font.css'; import '../../assets/fonts/Roboto/font.css';
import '../../assets/fonts/RobotoMono/font.css'; import '../../assets/fonts/RobotoMono/font.css';
import './style.css'; import './style.css';
import './localtx.html';
ReactDOM.render( ReactDOM.render(
<Application />, <Application />,

View File

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/parity-logo-black-no-text.png" type="image/png">
<title>Token Registry</title>
</head>
<body>
<div id="container"></div>
<script src="vendor.js"></script>
<script src="commons.js"></script>
<script src="/parity-utils/parity.js"></script>
<script src="registry.js"></script>
</body>
</html>

View File

@ -27,7 +27,6 @@ import Container from './registry/Container';
import '../../assets/fonts/Roboto/font.css'; import '../../assets/fonts/Roboto/font.css';
import '../../assets/fonts/RobotoMono/font.css'; import '../../assets/fonts/RobotoMono/font.css';
import './style.css'; import './style.css';
import './registry.html';
ReactDOM.render( ReactDOM.render(
<Provider store={ store }> <Provider store={ store }>

View File

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/parity-logo-black-no-text.png" type="image/png">
<title>Method Signature Registry</title>
</head>
<body>
<div id="container"></div>
<script src="vendor.js"></script>
<script src="commons.js"></script>
<script src="/parity-utils/parity.js"></script>
<script src="signaturereg.js"></script>
</body>
</html>

View File

@ -25,7 +25,6 @@ import Application from './signaturereg/Application';
import '../../assets/fonts/Roboto/font.css'; import '../../assets/fonts/Roboto/font.css';
import '../../assets/fonts/RobotoMono/font.css'; import '../../assets/fonts/RobotoMono/font.css';
import './style.css'; import './style.css';
import './signaturereg.html';
ReactDOM.render( ReactDOM.render(
<Application />, <Application />,

View File

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/parity-logo-black-no-text.png" type="image/png">
<title>Token Registry</title>
</head>
<body>
<div id="container"></div>
<script src="vendor.js"></script>
<script src="commons.js"></script>
<script src="/parity-utils/parity.js"></script>
<script src="tokenreg.js"></script>
</body>
</html>

View File

@ -27,7 +27,6 @@ import Container from './tokenreg/Container';
import '../../assets/fonts/Roboto/font.css'; import '../../assets/fonts/Roboto/font.css';
import '../../assets/fonts/RobotoMono/font.css'; import '../../assets/fonts/RobotoMono/font.css';
import './style.css'; import './style.css';
import './tokenreg.html';
ReactDOM.render( ReactDOM.render(
( (

View File

@ -4,8 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/parity-logo-black-no-text.png" type="image/png"> <title><%= htmlWebpackPlugin.options.title %></title>
<title>Parity</title>
<style> <style>
html, body, #container { html, body, #container {
height: 100%; height: 100%;
@ -15,7 +14,5 @@
<body> <body>
<div id="container"></div> <div id="container"></div>
<script src="vendor.js"></script> <script src="vendor.js"></script>
<script src="commons.js"></script>
<script src="index.js"></script>
</body> </body>
</html> </html>

View File

@ -42,7 +42,6 @@ import '../assets/fonts/Roboto/font.css';
import '../assets/fonts/RobotoMono/font.css'; import '../assets/fonts/RobotoMono/font.css';
import styles from './reset.css'; import styles from './reset.css';
import './index.html';
injectTapEventPlugin(); injectTapEventPlugin();

View File

@ -24,39 +24,54 @@ const rucksack = require('rucksack-css');
const webpack = require('webpack'); const webpack = require('webpack');
const WebpackErrorNotificationPlugin = require('webpack-error-notification'); const WebpackErrorNotificationPlugin = require('webpack-error-notification');
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ENV = process.env.NODE_ENV || 'development'; const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production'; const isProd = ENV === 'production';
const DEST = process.env.BUILD_DEST || '.build'; const DEST = process.env.BUILD_DEST || '.build';
const FAVICON = path.resolve(__dirname, 'assets/images/parity-logo-black-no-text.png');
const DAPPS = [
{ name: 'basiccoin', entry: './dapps/basiccoin.js', title: 'Basic Token Deployment' },
{ name: 'dappreg', entry: './dapps/dappreg.js', title: 'Dapp Registry' },
{ name: 'githubhint', entry: './dapps/githubhint.js', title: 'GitHub Hint', secure: true },
{ name: 'localtx', entry: './dapps/localtx.js', title: 'Local transactions Viewer', secure: true },
{ name: 'registry', entry: './dapps/registry.js', title: 'Registry' },
{ name: 'signaturereg', entry: './dapps/signaturereg.js', title: 'Method Signature Registry' },
{ name: 'tokenreg', entry: './dapps/tokenreg.js', title: 'Token Registry' }
];
// dapps
const entry = DAPPS.reduce((_entry, dapp) => {
_entry[dapp.name] = dapp.entry;
return _entry;
}, {});
// main UI
entry.index = './index.js';
module.exports = { module.exports = {
debug: !isProd, debug: !isProd,
cache: !isProd, cache: !isProd,
devtool: isProd ? '#eval' : '#cheap-module-eval-source-map', devtool: isProd ? '#eval' : '#cheap-module-eval-source-map',
context: path.join(__dirname, './src'), context: path.join(__dirname, './src'),
entry: { entry: entry,
// dapps
'basiccoin': ['./dapps/basiccoin.js'],
'dappreg': ['./dapps/dappreg.js'],
'githubhint': ['./dapps/githubhint.js'],
'registry': ['./dapps/registry.js'],
'signaturereg': ['./dapps/signaturereg.js'],
'localtx': ['./dapps/localtx.js'],
'tokenreg': ['./dapps/tokenreg.js'],
// app
'index': ['./index.js']
},
output: { output: {
path: path.join(__dirname, DEST), path: path.join(__dirname, DEST),
filename: '[name].js' filename: '[name].[hash].js'
}, },
module: { module: {
loaders: [ loaders: [
{ {
test: /\.js$/, test: /\.js$/,
exclude: /node_modules/, exclude: [ /node_modules/, /vendor\.js$/ ],
loaders: [ 'happypack/loader?id=js' ] loaders: [ 'happypack/loader?id=js' ]
}, },
{
test: /vendor\.js$/,
loaders: [ 'file?name=[name].[hash].[ext]' ]
},
{ {
test: /\.js$/, test: /\.js$/,
include: /node_modules\/material-ui-chip-input/, include: /node_modules\/material-ui-chip-input/,
@ -157,9 +172,28 @@ module.exports = {
new webpack.DllReferencePlugin({ new webpack.DllReferencePlugin({
context: '.', context: '.',
manifest: require(`./${DEST}/vendor-manifest.json`) manifest: require(`./${DEST}/vendor-manifest.json`)
}),
new HtmlWebpackPlugin({
title: 'Parity',
filename: 'index.html',
template: './index.ejs',
favicon: FAVICON,
chunks: [ 'commons', 'index' ]
}) })
]; ];
DAPPS.map((dapp) => {
return new HtmlWebpackPlugin({
title: dapp.title,
filename: dapp.name + '.html',
template: './dapps/index.ejs',
favicon: FAVICON,
secure: dapp.secure,
chunks: [ 'commons', dapp.name ]
});
}).forEach((plugin) => plugins.push(plugin));
if (!isProd) { if (!isProd) {
plugins.push( plugins.push(
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({