Reuse Webpack Configs

js/package.json

@@ -26,16 +26,16 @@
   ],
   "scripts": {
     "build": "npm run build:lib && npm run build:dll && npm run build:app",
-    "build:app": "webpack --progress",
+    "build:app": "webpack --config webpack/config --progress",
-    "build:lib": "webpack --config webpack.libraries --progress",
+    "build:lib": "webpack --config webpack/libraries --progress",
-    "build:dll": "webpack --config webpack.vendor --progress",
+    "build:dll": "webpack --config webpack/vendor --progress",
     "ci:build": "npm run ci:build:lib && npm run ci:build:dll && npm run ci:build:app",
-    "ci:build:app": "NODE_ENV=production webpack",
+    "ci:build:app": "NODE_ENV=production webpack --config webpack/config",
-    "ci:build:lib": "NODE_ENV=production webpack --config webpack.libraries",
+    "ci:build:lib": "NODE_ENV=production webpack --config webpack/libraries",
-    "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:app": "webpack-dev-server -d --history-api-fallback --open --hot --inline --progress --colors --port 3000",
+    "start:app": "webpack-dev-server --config webpack/config -d --history-api-fallback --open --hot --inline --progress --colors --port 3000",
     "clean": "rm -rf ./build ./coverage",
     "coveralls": "npm run testCoverage && coveralls < coverage/lcov.info",
     "lint": "eslint --ignore-path .gitignore ./src/",

js/webpack/config.js

@@ -15,7 +15,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-const HappyPack = require('happypack');
 const path = require('path');
 const postcssImport = require('postcss-import');
 const postcssNested = require('postcss-nested');
@@ -26,11 +25,13 @@ const WebpackErrorNotificationPlugin = require('webpack-error-notification');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
+const Shared = require('./shared');
+
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
 const DEST = process.env.BUILD_DEST || '.build';
 
-const FAVICON = path.resolve(__dirname, 'assets/images/parity-logo-black-no-text.png');
+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' },
@@ -55,10 +56,10 @@ module.exports = {
   debug: !isProd,
   cache: !isProd,
   devtool: isProd ? '#eval' : '#cheap-module-eval-source-map',
-  context: path.join(__dirname, './src'),
+  context: path.join(__dirname, '../src'),
   entry: entry,
   output: {
-    path: path.join(__dirname, DEST),
+    path: path.join(__dirname, '../', DEST),
     filename: '[name].[hash].js'
   },
   module: {
@@ -110,18 +111,18 @@ module.exports = {
     ]
   },
   resolve: {
-    root: path.join(__dirname, 'node_modules'),
+    root: path.join(__dirname, '../node_modules'),
-    fallback: path.join(__dirname, 'node_modules'),
+    fallback: path.join(__dirname, '../node_modules'),
     extensions: ['', '.js', '.jsx'],
     unsafeCache: true
   },
   resolveLoaders: {
-    root: path.join(__dirname, 'node_modules'),
+    root: path.join(__dirname, '../node_modules'),
-    fallback: path.join(__dirname, 'node_modules')
+    fallback: path.join(__dirname, '../node_modules')
   },
 
   htmlLoader: {
-    root: path.resolve(__dirname, 'assets/images'),
+    root: path.resolve(__dirname, '../assets/images'),
     attrs: ['img:src', 'link:href']
   },
 
@@ -140,38 +141,13 @@ module.exports = {
     })
   ],
   plugins: (function () {
-    const plugins = [
+    const plugins = Shared.getPlugins().concat([
-      new HappyPack({
-        id: 'css',
-        threads: 4,
-        loaders: [
-          'style',
-          'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
-          'postcss'
-        ]
-      }),
-      new HappyPack({
-        id: 'js',
-        threads: 4,
-        loaders: isProd ? ['babel'] : [
-          'react-hot',
-          'babel?cacheDirectory=true'
-        ]
-      }),
       new CopyWebpackPlugin([{ from: './error_pages.css', to: 'styles.css' }], {}),
       new WebpackErrorNotificationPlugin(),
-      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),
-          LOGGING: JSON.stringify(!isProd)
-        }
-      }),
 
       new webpack.DllReferencePlugin({
         context: '.',
-        manifest: require(`./${DEST}/vendor-manifest.json`)
+        manifest: require(`../${DEST}/vendor-manifest.json`)
       }),
 
       new HtmlWebpackPlugin({
@@ -181,9 +157,7 @@ module.exports = {
         favicon: FAVICON,
         chunks: [ isProd ? null : 'commons', 'index' ]
       })
-    ];
+    ], DAPPS.map((dapp) => {
-
-    DAPPS.map((dapp) => {
       return new HtmlWebpackPlugin({
         title: dapp.title,
         filename: dapp.name + '.html',
@@ -192,7 +166,7 @@ module.exports = {
         secure: dapp.secure,
         chunks: [ isProd ? null : 'commons', dapp.name ]
       });
-    }).forEach((plugin) => plugins.push(plugin));
+    }));
 
     if (!isProd) {
       plugins.push(
@@ -203,24 +177,10 @@ module.exports = {
       );
     }
 
-    if (isProd) {
-      plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
-      plugins.push(new webpack.optimize.DedupePlugin());
-      plugins.push(new webpack.optimize.UglifyJsPlugin({
-        screwIe8: true,
-        compress: {
-          warnings: false
-        },
-        output: {
-          comments: false
-        }
-      }));
-    }
-
     return plugins;
   }()),
   devServer: {
-    contentBase: `./${DEST}`,
+    contentBase: path.resolve(__dirname, `../${DEST}`),
     historyApiFallback: false,
     quiet: false,
     hot: !isProd,

js/webpack/libraries.js

@@ -16,16 +16,14 @@
 
 // Run with `webpack --config webpack.libraries.js --progress`
 
-const HappyPack = require('happypack');
 const path = require('path');
-const webpack = require('webpack');
 
-const ENV = process.env.NODE_ENV || 'development';
+const Shared = require('./shared');
-const isProd = ENV === 'production';
+
 const DEST = process.env.BUILD_DEST || '.build';
 
 module.exports = {
-  context: path.join(__dirname, './src'),
+  context: path.join(__dirname, '../src'),
   entry: {
     // library
     'inject': ['./web3.js'],
@@ -33,7 +31,7 @@ module.exports = {
     'parity': ['./parity.js']
   },
   output: {
-    path: path.join(__dirname, DEST),
+    path: path.join(__dirname, '../', DEST),
     filename: '[name].js',
     library: '[name].js',
     libraryTarget: 'umd'
@@ -55,37 +53,5 @@ module.exports = {
       }
     ]
   },
-  plugins: (function () {
+  plugins: Shared.getPlugins()
-    const plugins = [
-      new HappyPack({
-        id: 'js',
-        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),
-          LOGGING: JSON.stringify(!isProd)
-        }
-      })
-    ];
-
-    if (isProd) {
-      plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
-      plugins.push(new webpack.optimize.DedupePlugin());
-      plugins.push(new webpack.optimize.UglifyJsPlugin({
-        screwIe8: true,
-        compress: {
-          warnings: false
-        },
-        output: {
-          comments: false
-        }
-      }));
-    }
-
-    return plugins;
-  }())
 };

js/webpack/npm.js

@@ -17,17 +17,19 @@
 const path = require('path');
 const webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const packageJson = require('./package.json');
+const packageJson = require('../package.json');
+
+const Shared = require('./shared');
 
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
 
 module.exports = {
-  context: path.join(__dirname, './src'),
+  context: path.join(__dirname, '../src'),
   target: 'node',
   entry: 'library.js',
   output: {
-    path: path.join(__dirname, '.npmjs'),
+    path: path.join(__dirname, '../.npmjs'),
     filename: 'library.js',
     library: 'Parity',
     libraryTarget: 'umd',
@@ -44,7 +46,7 @@ module.exports = {
     loaders: [
       {
         test: /(\.jsx|\.js)$/,
-        loader: 'babel',
+        loaders: [ 'happypack/loader?id=js' ],
         exclude: /node_modules/
       }
     ]
@@ -53,40 +55,24 @@ module.exports = {
     root: path.resolve('./src'),
     extensions: ['', '.js']
   },
-  plugins: (function () {
+  plugins: Shared.getPlugins().concat([
-    const plugins = [
+    new CopyWebpackPlugin([
-      new CopyWebpackPlugin([
+      {
-        {
+        from: '../parity.package.json',
-          from: '../parity.package.json',
+        to: 'package.json',
-          to: 'package.json',
+        transform: function (content, path) {
-          transform: function (content, path) {
+          const json = JSON.parse(content.toString());
-            const json = JSON.parse(content.toString());
+          json.version = packageJson.version;
-            json.version = packageJson.version;
+          return new Buffer(JSON.stringify(json, null, '  '), 'utf-8');
-            return new Buffer(JSON.stringify(json, null, '  '), 'utf-8');
-          }
-        },
-        {
-          from: '../LICENSE'
-        },
-        {
-          from: '../parity.md',
-          to: 'README.md'
         }
-      ], { copyUnmodified: true })
+      },
-    ];
+      {
-
+        from: '../LICENSE'
-    if (isProd) {
+      },
-      plugins.push(new webpack.optimize.UglifyJsPlugin({
+      {
-        screwIe8: true,
+        from: '../parity.md',
-        compress: {
+        to: 'README.md'
-          warnings: false
+      }
-        },
+    ], { copyUnmodified: true })
-        output: {
+  ])
-          comments: false
-        }
-      }));
-    }
-
-    return plugins;
-  }())
 };

js/webpack/shared.js

@@ -0,0 +1,73 @@
+// 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 HappyPack = require('happypack');
+
+const ENV = process.env.NODE_ENV || 'development';
+const isProd = ENV === 'production';
+
+function getPlugins (_isProd = isProd) {
+  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: 'js',
+      threads: 4,
+      loaders: _isProd ? ['babel'] : [
+        'react-hot',
+        'babel?cacheDirectory=true'
+      ]
+    }),
+
+    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),
+        LOGGING: JSON.stringify(!isProd)
+      }
+    })
+  ];
+
+  if (_isProd) {
+    plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
+    plugins.push(new webpack.optimize.DedupePlugin());
+    plugins.push(new webpack.optimize.UglifyJsPlugin({
+      screwIe8: true,
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      }
+    }));
+  }
+
+  return plugins;
+}
+
+module.exports = {
+  getPlugins: getPlugins
+};

js/webpack/vendor.js

@@ -14,11 +14,12 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-const HappyPack = require('happypack');
 const webpack = require('webpack');
+const path = require('path');
+
+const Shared = require('./shared');
 
 const ENV = process.env.NODE_ENV || 'development';
-const isProd = ENV === 'production';
 const DEST = process.env.BUILD_DEST || '.build';
 
 let modules = [
@@ -45,13 +46,6 @@ let modules = [
   'scryptsy'
 ];
 
-if (!isProd) {
-  modules = modules.concat([
-    'webpack-dev-server/client?http://localhost:3000',
-    'react-hot-loader', 'core-js', 'core-js/library'
-  ]);
-}
-
 module.exports = {
   entry: {
     vendor: modules
@@ -71,43 +65,19 @@ module.exports = {
   },
   output: {
     filename: '[name].js',
-    path: `${DEST}/`,
+    path: path.resolve(__dirname, '../', `${DEST}/`),
     library: '[name]_lib'
   },
-  plugins: (function () {
+  plugins: Shared.getPlugins().concat([
-    const plugins = [
+    new webpack.DllPlugin({
-      new webpack.DllPlugin({
+      name: '[name]_lib',
-        name: '[name]_lib',
+      path: path.resolve(__dirname, '../', `${DEST}/[name]-manifest.json`)
-        path: `${DEST}/[name]-manifest.json`
+    }),
-      }),
 
-      new webpack.DefinePlugin({
+    new webpack.DefinePlugin({
-        'process.env': {
+      'process.env': {
-          NODE_ENV: JSON.stringify(ENV)
+        NODE_ENV: JSON.stringify(ENV)
-        }
+      }
-      }),
+    })
-
+  ])
-      new HappyPack({
-        id: 'js',
-        threads: 4,
-        loaders: ['babel']
-      })
-    ];
-
-    if (isProd) {
-      plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
-      plugins.push(new webpack.optimize.DedupePlugin());
-      plugins.push(new webpack.optimize.UglifyJsPlugin({
-        screwIe8: true,
-        compress: {
-          warnings: false
-        },
-        output: {
-          comments: false
-        }
-      }));
-    }
-
-    return plugins;
-  }())
 };