WIP - Webpack 2 building

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",

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",

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;
 

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')
   }
 };
 

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' ]
+        // 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'
+        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'),
+    modules: [
-    fallback: path.join(__dirname, '../node_modules'),
+      path.join(__dirname, '../node_modules')
-    extensions: ['', '.js', '.jsx'],
+    ],
+    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([

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 });
 });

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]' ]
       }
     ]
   },

js/webpack/npm.js

@@ -15,7 +15,6 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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'),
+    modules: [
-    extensions: ['', '.js']
+      path.resolve('./src'),
+      path.join(__dirname, '../node_modules')
+    ],
+    extensions: ['.json', '.js', '.jsx']
   },
+
   plugins: Shared.getPlugins().concat([
     new CopyWebpackPlugin([
       {

js/webpack/shared.js

@@ -15,7 +15,8 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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({
+    // new HappyPack({
-      id: 'css',
+    //   id: 'css',
-      threads: 4,
+    //   threads: 4,
-      loaders: [
+    //   loaders: [
-        'style',
+    //     'style-loader',
-        'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+    //     'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
-        'postcss'
+    //     'postcss-loader'
-      ]
+    //   ]
-    }),
+    // }),
 
-    new HappyPack({
+    // new HappyPack({
-      id: 'js',
+    //   id: 'js',
-      threads: 4,
+    //   threads: 4,
-      loaders: _isProd ? ['babel'] : [
+    //   loaders: _isProd ? ['babel'] : [
-        'react-hot',
+    //     'react-hot-loader',
-        'babel?cacheDirectory=true'
+    //     'babel-loader?cacheDirectory=true'
-      ]
+    //   ]
-    }),
+    // }),
 
-    new HappyPack({
+    // new HappyPack({
-      id: 'babel',
+    //   id: 'babel',
-      threads: 4,
+    //   threads: 4,
-      loaders: ['babel']
+    //   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,
+  addProxies: addProxies
-  postcss: postcss
 };

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' ]
       }
     ]
   },