diff --git a/js/.babelrc b/js/.babelrc
index 27c697885..5c99af2ea 100644
--- a/js/.babelrc
+++ b/js/.babelrc
@@ -1,5 +1,9 @@
{
- "presets": ["es2017", "es2016", "es2015", "stage-0", "react"],
+ "presets": [
+ "es2017", "es2016",
+ [ "es2015", { "modules": false } ],
+ "stage-0", "react"
+ ],
"plugins": [
"transform-runtime",
"transform-decorators-legacy",
diff --git a/js/package.json b/js/package.json
index 168378bc3..ad944dc85 100644
--- a/js/package.json
+++ b/js/package.json
@@ -100,10 +100,11 @@
"mock-local-storage": "1.0.2",
"mock-socket": "~3.0.1",
"nock": "~8.0.0",
- "postcss-import": "~8.1.2",
+ "postcss-import": "8.1.0",
"postcss-loader": "~1.1.1",
"postcss-nested": "~1.0.0",
"postcss-simple-vars": "~3.0.0",
+ "progress": "^1.1.8",
"raw-loader": "~0.5.1",
"react-addons-perf": "~15.3.2",
"react-addons-test-utils": "~15.3.2",
diff --git a/js/src/contracts/contracts.js b/js/src/contracts/contracts.js
index 9d745762c..cefece7de 100644
--- a/js/src/contracts/contracts.js
+++ b/js/src/contracts/contracts.js
@@ -19,7 +19,7 @@ import Registry from './registry';
import SignatureReg from './signaturereg';
import TokenReg from './tokenreg';
import GithubHint from './githubhint';
-import smsVerification from './sms-verification';
+import * as smsVerification from './sms-verification';
let instance = null;
diff --git a/js/src/views/WriteContract/writeContractStore.js b/js/src/views/WriteContract/writeContractStore.js
index e057bc38e..a9f59aafb 100644
--- a/js/src/views/WriteContract/writeContractStore.js
+++ b/js/src/views/WriteContract/writeContractStore.js
@@ -24,17 +24,17 @@ const SNIPPETS = {
snippet0: {
name: 'Token.sol',
description: 'Standard ERP20 Token Contract',
- id: 'snippet0', sourcecode: require('raw!../../contracts/snippets/token.sol')
+ id: 'snippet0', sourcecode: require('raw-loader!../../contracts/snippets/token.sol')
},
snippet1: {
name: 'StandardToken.sol',
description: 'Implementation of ERP20 Token Contract',
- id: 'snippet1', sourcecode: require('raw!../../contracts/snippets/standard-token.sol')
+ id: 'snippet1', sourcecode: require('raw-loader!../../contracts/snippets/standard-token.sol')
},
snippet2: {
name: 'HumanStandardToken.sol',
description: 'Implementation of the Human Token Contract',
- id: 'snippet2', sourcecode: require('raw!../../contracts/snippets/human-standard-token.sol')
+ id: 'snippet2', sourcecode: require('raw-loader!../../contracts/snippets/human-standard-token.sol')
}
};
diff --git a/js/webpack/config.js b/js/webpack/config.js
index 814c731a3..11a51cee0 100644
--- a/js/webpack/config.js
+++ b/js/webpack/config.js
@@ -31,7 +31,6 @@ const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
module.exports = {
- debug: !isProd,
cache: !isProd,
devtool: isProd ? '#eval' : '#cheap-module-eval-source-map',
@@ -46,43 +45,61 @@ module.exports = {
},
module: {
- loaders: [
+ rules: [
{
test: /\.js$/,
exclude: /node_modules/,
- loaders: [ 'happypack/loader?id=js' ]
+ // use: [ 'happypack/loader?id=js' ]
+ use: isProd ? ['babel-loader'] : [
+ // 'react-hot-loader',
+ 'babel-loader?cacheDirectory=true'
+ ]
},
{
test: /\.js$/,
include: /node_modules\/material-ui-chip-input/,
- loader: 'babel'
+ use: [ 'babel-loader' ]
},
{
test: /\.json$/,
- loaders: ['json']
+ use: [ 'json-loader' ]
},
{
test: /\.html$/,
- loader: 'file?name=[name].[ext]!extract-loader!html-loader'
+ use: [
+ 'file-loader?name=[name].[ext]!extract-loader',
+ {
+ loader: 'html-loader',
+ options: {
+ root: path.resolve(__dirname, '../assets/images'),
+ attrs: ['img:src', 'link:href']
+ }
+ }
+ ]
},
{
test: /\.css$/,
- include: [/src/],
- loaders: [ 'happypack/loader?id=css' ]
+ include: [ /src/ ],
+ // use: [ 'happypack/loader?id=css' ]
+ use: [
+ 'style-loader',
+ 'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+ 'postcss-loader'
+ ]
},
{
test: /\.css$/,
- exclude: [/src/],
- loader: 'style!css'
+ exclude: [ /src/ ],
+ use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg)$/,
- loader: 'file-loader?name=[name].[hash].[ext]'
+ use: [ 'file-loader?name=[name].[hash].[ext]' ]
},
{
test: /\.(woff(2)|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
- loader: 'file-loader'
+ use: [ 'file-loader' ]
}
],
noParse: [
@@ -91,22 +108,12 @@ module.exports = {
},
resolve: {
- root: path.join(__dirname, '../node_modules'),
- fallback: path.join(__dirname, '../node_modules'),
- extensions: ['', '.js', '.jsx'],
+ modules: [
+ path.join(__dirname, '../node_modules')
+ ],
+ extensions: ['.json', '.js', '.jsx'],
unsafeCache: true
},
- resolveLoaders: {
- root: path.join(__dirname, '../node_modules'),
- fallback: path.join(__dirname, '../node_modules')
- },
-
- htmlLoader: {
- root: path.resolve(__dirname, '../assets/images'),
- attrs: ['img:src', 'link:href']
- },
-
- postcss: Shared.postcss,
plugins: (function () {
const plugins = Shared.getPlugins().concat([
diff --git a/js/webpack/dev.server.js b/js/webpack/dev.server.js
index 7ebdd815e..2ae3fe0f7 100644
--- a/js/webpack/dev.server.js
+++ b/js/webpack/dev.server.js
@@ -20,11 +20,13 @@ const webpackHotMiddleware = require('webpack-hot-middleware');
const http = require('http');
const express = require('express');
+const ProgressBar = require('progress');
const webpackConfig = require('./config');
const Shared = require('./shared');
const hotMiddlewareScript = 'webpack-hot-middleware/client';
+let progressBar = { update: () => {} };
/**
* Add webpack hot middleware to each entry in the config
@@ -39,6 +41,9 @@ const hotMiddlewareScript = 'webpack-hot-middleware/client';
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
webpackConfig.plugins.push(new webpack.NoErrorsPlugin());
+ webpackConfig.plugins.push(new webpack.ProgressPlugin(
+ (percentage) => progressBar.update(percentage)
+ ));
})();
const app = express();
@@ -47,6 +52,7 @@ const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
noInfo: false,
quiet: false,
+ progress: true,
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true
@@ -65,4 +71,5 @@ Shared.addProxies(app);
const server = http.createServer(app);
server.listen(process.env.PORT || 3000, function () {
console.log('Listening on port', server.address().port);
+ progressBar = new ProgressBar('[:bar] :percent :etas', { total: 50 });
});
diff --git a/js/webpack/libraries.js b/js/webpack/libraries.js
index 6494b6d0a..d1a2b4915 100644
--- a/js/webpack/libraries.js
+++ b/js/webpack/libraries.js
@@ -21,6 +21,8 @@ const path = require('path');
const Shared = require('./shared');
const DEST = process.env.BUILD_DEST || '.build';
+const ENV = process.env.NODE_ENV || 'development';
+const isProd = ENV === 'production';
module.exports = {
context: path.join(__dirname, '../src'),
@@ -37,19 +39,23 @@ module.exports = {
libraryTarget: 'umd'
},
module: {
- loaders: [
+ rules: [
{
test: /\.js$/,
exclude: /node_modules/,
- loader: 'happypack/loader?id=js'
+ // use: [ 'happypack/loader?id=js' ]
+ use: isProd ? ['babel-loader'] : [
+ // 'react-hot-loader',
+ 'babel-loader?cacheDirectory=true'
+ ]
},
{
test: /\.json$/,
- loaders: ['json']
+ use: [ 'json-loader' ]
},
{
test: /\.html$/,
- loader: 'file?name=[name].[ext]'
+ use: [ 'file-loader?name=[name].[ext]' ]
}
]
},
diff --git a/js/webpack/npm.js b/js/webpack/npm.js
index a3ede06f0..7353efe55 100644
--- a/js/webpack/npm.js
+++ b/js/webpack/npm.js
@@ -15,7 +15,6 @@
// along with Parity. If not, see .
const path = require('path');
-const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const packageJson = require('../package.json');
@@ -43,18 +42,27 @@ module.exports = {
noParse: [
/babel-polyfill/
],
- loaders: [
+ rules: [
{
test: /(\.jsx|\.js)$/,
- loaders: [ 'happypack/loader?id=js' ],
+ // use: [ 'happypack/loader?id=js' ],
+ use: isProd ? ['babel-loader'] : [
+ // 'react-hot-loader',
+ 'babel-loader?cacheDirectory=true'
+ ],
exclude: /node_modules/
}
]
},
+
resolve: {
- root: path.resolve('./src'),
- extensions: ['', '.js']
+ modules: [
+ path.resolve('./src'),
+ path.join(__dirname, '../node_modules')
+ ],
+ extensions: ['.json', '.js', '.jsx']
},
+
plugins: Shared.getPlugins().concat([
new CopyWebpackPlugin([
{
diff --git a/js/webpack/shared.js b/js/webpack/shared.js
index 0fe3d3275..19c3cd770 100644
--- a/js/webpack/shared.js
+++ b/js/webpack/shared.js
@@ -15,7 +15,8 @@
// along with Parity. If not, see .
const webpack = require('webpack');
-const HappyPack = require('happypack');
+const path = require('path');
+// const HappyPack = require('happypack');
const postcssImport = require('postcss-import');
const postcssNested = require('postcss-nested');
@@ -26,31 +27,46 @@ const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
function getPlugins (_isProd = isProd) {
+ const postcss = [
+ postcssImport({
+ addDependencyTo: webpack
+ }),
+ postcssNested({}),
+ postcssVars({
+ unknown: function (node, name, result) {
+ node.warn(result, `Unknown variable ${name}`);
+ }
+ }),
+ rucksack({
+ autoprefixer: true
+ })
+ ];
+
const plugins = [
- new HappyPack({
- id: 'css',
- threads: 4,
- loaders: [
- 'style',
- 'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
- 'postcss'
- ]
- }),
+ // new HappyPack({
+ // id: 'css',
+ // threads: 4,
+ // loaders: [
+ // 'style-loader',
+ // 'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+ // 'postcss-loader'
+ // ]
+ // }),
- new HappyPack({
- id: 'js',
- threads: 4,
- loaders: _isProd ? ['babel'] : [
- 'react-hot',
- 'babel?cacheDirectory=true'
- ]
- }),
+ // new HappyPack({
+ // id: 'js',
+ // threads: 4,
+ // loaders: _isProd ? ['babel'] : [
+ // 'react-hot-loader',
+ // 'babel-loader?cacheDirectory=true'
+ // ]
+ // }),
- new HappyPack({
- id: 'babel',
- threads: 4,
- loaders: ['babel']
- }),
+ // new HappyPack({
+ // id: 'babel',
+ // threads: 4,
+ // loaders: ['babel-loader']
+ // }),
new webpack.DefinePlugin({
'process.env': {
@@ -62,11 +78,19 @@ function getPlugins (_isProd = isProd) {
}
}),
+ new webpack.LoaderOptionsPlugin({
+ minimize: isProd,
+ debug: !isProd,
+ options: {
+ context: path.join(__dirname, '../src'),
+ postcss: postcss
+ }
+ }),
+
new webpack.optimize.OccurrenceOrderPlugin(!_isProd)
];
if (_isProd) {
- plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.UglifyJsPlugin({
screwIe8: true,
compress: {
@@ -90,21 +114,6 @@ function getDappsEntry () {
}, {});
}
-const postcss = [
- postcssImport({
- addDependencyTo: webpack
- }),
- postcssNested({}),
- postcssVars({
- unknown: function (node, name, result) {
- node.warn(result, `Unknown variable ${name}`);
- }
- }),
- rucksack({
- autoprefixer: true
- })
-];
-
function addProxies (app) {
const proxy = require('http-proxy-middleware');
@@ -147,6 +156,5 @@ function addProxies (app) {
module.exports = {
getPlugins: getPlugins,
dappsEntry: getDappsEntry(),
- addProxies: addProxies,
- postcss: postcss
+ addProxies: addProxies
};
diff --git a/js/webpack/vendor.js b/js/webpack/vendor.js
index c7efe3edf..dfef25464 100644
--- a/js/webpack/vendor.js
+++ b/js/webpack/vendor.js
@@ -51,15 +51,15 @@ module.exports = {
vendor: modules
},
module: {
- loaders: [
+ rules: [
{
test: /\.json$/,
- loaders: ['json']
+ use: [ 'json-loader' ]
},
{
test: /\.js$/,
include: /(ethereumjs-tx)/,
- loaders: [ 'happypack/loader?id=babel' ]
+ use: [ 'babel-loader' ]
}
]
},