⬆️ upgrade to webpack 2

.babelrc

@@ -1,11 +1,10 @@
 {
   "presets": [
     "react",
-    "es2015",
+    "env",
     "stage-0"
   ],
   "plugins": [
-    "transform-runtime",
     "transform-decorators-legacy"
   ],
   "env": {
@@ -15,3 +14,50 @@
   }
 }
 
+/* Noted at 2017-02-23
+* most plugins at semver "^6.22.0"
+* below are plugins that're included in preset-env and preset-stage-0
+
+* stage-0 to stage-3:
+bable-plugin-syntax-trailing-function-commas
+bable-plugin-transform-async-generator-functions
+bable-plugin-transform-async-to-generator
+bable-plugin-transform-exponentiation-operator
+bable-plugin-transform-object-rest-spread
+bable-plugin-transform-class-properties
+bable-plugin-transform-decorators
+bable-plugin-syntax-dynamic-import
+bable-plugin-transform-class-constructor-call
+bable-plugin-transform-export-extensions
+bable-plugin-transform-do-expressions
+bable-plugin-transform-function-bind
+
+* preset-es2015, es2016, es2017:
+bable-plugin-syntax-trailing-function-commas
+bable-plugin-transform-async-to-generator
+bable-plugin-transform-exponentiation-operator
+bable-plugin-check-es2015-constants
+bable-plugin-transform-es2015-arrow-functions
+bable-plugin-transform-es2015-block-scoped-functions
+bable-plugin-transform-es2015-block-scoping
+bable-plugin-transform-es2015-classes
+bable-plugin-transform-es2015-computed-properties
+bable-plugin-transform-es2015-destructuring
+bable-plugin-transform-es2015-duplicate-keys
+bable-plugin-transform-es2015-for-of
+bable-plugin-transform-es2015-function-name
+bable-plugin-transform-es2015-literals
+bable-plugin-transform-es2015-modules-amd
+bable-plugin-transform-es2015-modules-commonjs
+bable-plugin-transform-es2015-modules-systemjs
+bable-plugin-transform-es2015-modules-umd
+bable-plugin-transform-es2015-object-super
+bable-plugin-transform-es2015-parameters
+bable-plugin-transform-es2015-shorthand-properties
+bable-plugin-transform-es2015-spread
+bable-plugin-transform-es2015-sticky-regex
+bable-plugin-transform-es2015-template-literals
+bable-plugin-transform-es2015-typeof-symbol
+bable-plugin-transform-es2015-unicode-regex
+bable-plugin-transform-regenerator
+*/

package.json

@@ -4,10 +4,7 @@
   "description": "Coding WebIDE",
   "main": "index.js",
   "private": true,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Coding/WebIDE-Frontend.git"
-  },
+  "repository": "https://github.com/Coding/WebIDE-Frontend.git",
   "bugs": {
     "url": "https://github.com/Coding/WebIDE-Frontend/issues"
   },
@@ -25,43 +22,34 @@
     "coding",
     "webide"
   ],
-  "author": {
-    "name": "hackape",
-    "email": "vince@hackape.com"
-  },
+  "author": "hackape <vince@hackape.com>",
   "license": "BSD-3-Clause",
   "devDependencies": {
-    "babel-core": "^6.13.2",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.4",
+    "babel-core": "^6.23.1",
+    "babel-loader": "^6.3.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-runtime": "^6.12.0",
-    "babel-polyfill": "^6.13.0",
-    "babel-preset-es2015": "^6.13.2",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-react-hmre": "^1.1.1",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-runtime": "^6.9.0",
-    "copy-webpack-plugin": "^3.0.1",
-    "cross-env": "^2.0.1",
-    "css-loader": "^0.23.1",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-env": "^1.1.8",
+    "babel-preset-react": "^6.23.0",
+    "babel-preset-stage-0": "^6.22.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^3.1.4",
+    "css-loader": "^0.26.1",
     "eslint": "^3.5.0",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-import-resolver-webpack": "^0.3.0",
     "eslint-plugin-import": "^1.15.0",
     "eslint-plugin-jsx-a11y": "^1.3.0",
     "eslint-plugin-react": "^5.0.1",
-    "file-loader": "^0.9.0",
-    "html-webpack-plugin": "^2.22.0",
-    "regexp-replace-loader": "^0.0.1",
-    "standard": "*",
+    "file-loader": "^0.10.0",
+    "html-webpack-plugin": "^2.28.0",
     "style-loader": "^0.13.1",
     "stylus": "^0.54.5",
-    "stylus-loader": "^2.3.1",
+    "stylus-loader": "^2.5.0",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
-    "webpack-merge": "^0.14.1"
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1",
+    "webpack-merge": "^3.0.0"
   },
   "dependencies": {
     "bootstrap-styl": "^5.0.7",
@@ -74,6 +62,7 @@
     "font-awesome": "^4.6.3",
     "immutability-helper": "^2.0.0",
     "immutable": "^3.8.1",
+    "loader-utils": "^1.0.2",
     "lodash": "^4.14.2",
     "markdown": "^0.5.0",
     "octicons": "^4.3.0",
@@ -87,7 +76,7 @@
     "redux-thunk": "^2.1.0",
     "reselect": "^2.5.4",
     "sh.js": "git+https://github.com/vangie/sh.js#v1.2.28",
-    "socket.io-client": "^0.9.6",
+    "socket.io-client": "^1.7.3",
     "sockjs-client": "^1.1.1",
     "stompjs": "^2.3.3"
   }

webpack.config.js

@@ -16,7 +16,10 @@ const CommonConfig = {
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['', '.js', '.jsx']
+    extensions: ['*', '.js', '.jsx']
+  },
+  resolveLoader: {
+    modules: [path.resolve(__dirname, "webpack_configs/loaders/"), "node_modules"]
   },
   plugins: [
     new HtmlWebpackPlugin({
@@ -28,7 +31,7 @@ const CommonConfig = {
     }])
   ],
   module: {
-    loaders: [
+    rules: [
       { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' }
     ]
   }

webpack_configs/devServer.config.js

@@ -16,11 +16,11 @@ module.exports = function (options) {
       })
     ],
     module: {
-      loaders: [
+      rules: [
         {
           test: /config\.js$/,
-          loader: 'regexp-replace',
-          query: {
+          loader: 'regexp-replace-loader',
+          options: {
             match: {
               pattern: 'baseURL: \'\' \\|\\| window\\.location\\.origin,',
               flags: 'g'

webpack_configs/loaders/regexp-replace-loader.js

@@ -0,0 +1,5 @@
+module.exports = function (source) {
+  var query = this.query;
+  var re = new RegExp(query.match.pattern, query.match.flags);
+  return source.replace(re, query.replaceWith);
+};

webpack_configs/stylesheet.config.js

@@ -1,39 +1,48 @@
 const bootstrap = require('bootstrap-styl')
+const stylusLoader = require('stylus-loader')
 
 module.exports = function (paths) {
   return {
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.woff\??([a-f\d]+)?(v=\d+\.\d+\.\d+)?$/,
-          loaders: ['file']
+          use: ['file-loader']
           // loader: "url?limit=10000&mimetype=application/font-woff"
         }, {
           test: /\.woff2\??([a-f\d]+)?(v=\d+\.\d+\.\d+)?$/,
-          loaders: ['file']
+          use: ['file-loader']
           // loader: "url?limit=10000&mimetype=application/font-woff"
         }, {
           test: /\.ttf\??([a-f\d]+)?(v=\d+\.\d+\.\d+)?$/,
-          loaders: ['file']
+          use: ['file-loader']
           // loader: "url?limit=10000&mimetype=application/octet-stream"
         }, {
           test: /\.eot\??([a-f\d]+)?(v=\d+\.\d+\.\d+)?$/,
-          loaders: ['file']
+          use: ['file-loader']
         }, {
           test: /\.svg\??([a-f\d]+)?(v=\d+\.\d+\.\d+)?$/,
-          loaders: ['file']
+          use: ['file-loader']
           // loader: "url?limit=10000&mimetype=image/svg+xml"
         }, {
           test: /\.styl$/,
-          loaders: ['style', 'css', 'stylus']
+          use: [
+            'style-loader',
+            'css-loader',
+            'stylus-loader'
+          ]
         }, {
           test: /\.css$/,
-          loaders: ['style', 'css']
+          use: ['style-loader', 'css-loader']
         }
       ]
     },
-    stylus: {
-      use: [bootstrap()]
-    }
+    // https://github.com/shama/stylus-loader/issues/149
+    // https://github.com/shama/stylus-loader/pull/154/files#diff-0444c5b7c3bc2c340b3654c507443b06R35
+    plugins: [
+      new (stylusLoader.OptionsPlugin)({
+        default: { use: [bootstrap()] }
+      })
+    ]
   }
 }