Merge pull request #3312 from RVKen/webpack-migration-2.x

migrate webpack to v2.6.1

build-tools/loadersByExtension.js

@@ -1,28 +0,0 @@
-function extsToRegExp(exts) {
-	return new RegExp("\\.(" + exts.map(function(ext) {
-		return ext.replace(/\./g, "\\.");
-	}).join("|") + ")(\\?.*)?$");
-}
-
-module.exports = function loadersByExtension(obj) {
-	var loaders = [];
-	Object.keys(obj).forEach(function(key) {
-		var exts = key.split("|");
-		var value = obj[key];
-		var entry = {
-			extensions: exts,
-			test: extsToRegExp(exts)
-		};
-		if(Array.isArray(value)) {
-			entry.loaders = value;
-		} else if(typeof value === "string") {
-			entry.loader = value;
-		} else {
-			Object.keys(value).forEach(function(valueKey) {
-				entry[valueKey] = value[valueKey];
-			});
-		}
-		loaders.push(entry);
-	});
-	return loaders;
-};

dist/swagger-ui-bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;AA+4CA;;;;;;AAoIA;AAy2FA;AA8iCA;AA6lJA;AA81IA;AAwuGA;AA01FA;AAkjFA;AAs3FA;AAi+CA;AA29CA;AAmtCA;AAuyEA;;;;;AAwiDA;AA8zJA;;;;;;;;;;;;;;AAyoFA;AA+lIA;AA4oJA;AAqvHA;AA8nGA;AA+iEA;AAw3DA;AA4nDA;AAknBA;;;;;;AAg1FA;AAggGA;;;;;AA23CA;AAgsFA;AA6kDA;AA01CA;AA8yFA;AA61CA;AA0jFA;;;;;;;;;AA6pEA;AA2zIA;AAu7FA;AAmrFA;AAq/EA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;;;;;AAsyKA;;;;;;AAmqEA;;;;;;;;;;;;;;;;;;;;;;;;;;AA6nTA;;;;;;;;;;;;;;AAu8JA;;;;;;;;;AA8/mBA;;;;;AA6/PA;;;;;;AAqpVA","sourceRoot":""}

dist/swagger-ui-standalone-preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA+tEA;AAo7GA;AAw0FA;;;;;;AAmZA;AAivFA;AAu+CA;AAo+CA;AAirCA;AAuyEA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA40CA;;;;;;AA4kFA","sourceRoot":""}

dist/swagger-ui.css.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.css","sources":[],"mappings":"","sourceRoot":""}
+{"version":3,"file":"swagger-ui.css","sources":[],"mappings":";;;","sourceRoot":""}

dist/swagger-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;AA+nEA;;;;;;AAmgBA;AA2pHA;AA0pIA;AA09FA;AA0+CA;AAs0CA;AAgvCA","sourceRoot":""}
+{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAkoaA","sourceRoot":""}

make-webpack-config.js

@@ -3,11 +3,8 @@ var path = require('path')
 var webpack = require('webpack')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var deepExtend = require('deep-extend')
-var autoprefixer = require('autoprefixer')
 const {gitDescribeSync} = require('git-describe');
 
-var loadersByExtension = require('./build-tools/loadersByExtension')
-
 var pkg = require('./package.json')
 
 let gitInfo
@@ -21,7 +18,27 @@ try {
   }
 }
 
-module.exports = function(options) {
+var commonRules = [
+  { test: /\.(js(x)?)(\?.*)?$/,
+    use: [{
+      loader: 'babel-loader',
+      options: {
+        retainLines: true
+      }
+    }],
+    include: [ path.join(__dirname, 'src') ]
+  },
+  { test: /\.(txt|yaml)(\?.*)?$/,
+    loader: 'raw-loader' },
+  { test: /\.(png|jpg|jpeg|gif|svg)(\?.*)?$/,
+    loader: 'url-loader?limit=10000' },
+  { test: /\.(woff|woff2)(\?.*)?$/,
+    loader: 'url-loader?limit=100000' },
+  { test: /\.(ttf|eot)(\?.*)?$/,
+    loader: 'file-loader' }
+]
+
+module.exports = function(rules, options) {
 
   // Special options, that have logic in this file
   // ...with defaults
@@ -33,23 +50,11 @@ module.exports = function(options) {
     sourcemaps: false,
   }, options._special)
 
-  var loadersMap = {
-    'js(x)?': {
-      loader: 'babel?retainLines=true',
-      include: [ path.join(__dirname, 'src') ],
-    },
-    'json': 'json-loader',
-    'txt|yaml': 'raw-loader',
-    'png|jpg|jpeg|gif|svg': specialOptions.disableAssets ? 'null-loader' : 'url-loader?limit=10000',
-    'woff|woff2': specialOptions.disableAssets ? 'null-loader' : 'url-loader?limit=100000',
-    'ttf|eot':  specialOptions.disableAssets ? 'null-loader' : 'file-loader',
-    "worker.js": ["worker-loader?inline=true", "babel"]
-  }
-
   var plugins = []
 
   if( specialOptions.separateStylesheets ) {
-    plugins.push(new ExtractTextPlugin('[name].css' + (specialOptions.longTermCaching ? '?[contenthash]' : ''), {
+    plugins.push(new ExtractTextPlugin({
+      filename: '[name].css' + (specialOptions.longTermCaching ? '?[contenthash]' : ''),
       allChunks: true
     }))
   }
@@ -58,14 +63,16 @@ module.exports = function(options) {
 
     plugins.push(
       new webpack.optimize.UglifyJsPlugin({
-        compressor: {
-          warnings: false
-        }
+        sourceMap: true,
       }),
-      new webpack.optimize.DedupePlugin()
+      new webpack.LoaderOptionsPlugin({
+        options: {
+          context: __dirname
+        }
+      })
     )
 
-    plugins.push( new webpack.NoErrorsPlugin())
+    plugins.push( new webpack.NoEmitOnErrorsPlugin())
 
   }
 
@@ -83,34 +90,7 @@ module.exports = function(options) {
       })
     }))
 
-  var cssLoader = 'css-loader!postcss-loader'
-
-  var completeStylesheetLoaders = deepExtend({
-    'css': cssLoader,
-    'scss': cssLoader + '!' + 'sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true',
-    'less': cssLoader + '!' + 'less-loader',
-  }, specialOptions.stylesheetLoaders)
-
-  if(specialOptions.cssModules) {
-    cssLoader = cssLoader + '?module' +  (specialOptions.minimize ? '' : '&localIdentName=[path][name]---[local]---[hash:base64:5]')
-  }
-
-  Object.keys(completeStylesheetLoaders).forEach(function(ext) {
-    var ori = completeStylesheetLoaders[ext]
-    if(specialOptions.separateStylesheets) {
-      completeStylesheetLoaders[ext] = ExtractTextPlugin.extract('style-loader', ori)
-    } else {
-      completeStylesheetLoaders[ext] = 'style-loader!' + ori
-    }
-  })
-
-  var loaders = loadersByExtension(deepExtend({}, loadersMap, specialOptions.loaders, completeStylesheetLoaders))
-  var extraLoaders = (options.module || {} ).loaders
-
-  if(Array.isArray(extraLoaders)) {
-    loaders = loaders.concat(extraLoaders)
-    delete options.module.loaders
-  }
+  delete options._special
 
   var completeConfig =  deepExtend({
     entry: {},
@@ -130,11 +110,11 @@ module.exports = function(options) {
     },
 
     module: {
-      loaders: loaders,
+      rules: commonRules.concat(rules),
     },
 
     resolveLoader: {
-      root: path.join(__dirname, 'node_modules'),
+      modules: [path.join(__dirname, 'node_modules')],
     },
 
     externals: {
@@ -142,19 +122,16 @@ module.exports = function(options) {
     },
 
     resolve: {
-      root: path.join(__dirname, './src'),
-      modulesDirectories: ['node_modules'],
-      extensions: ["", ".web.js", ".js", ".jsx", ".json", ".less"],
-      packageAlias: 'browser',
+      modules: [
+        path.join(__dirname, './src'),
+        'node_modules'
+      ],
+      extensions: [".web.js", ".js", ".jsx", ".json", ".less"],
       alias: {
         base: "getbase/src/less/base",
       }
     },
 
-    postcss: function() {
-      return [autoprefixer]
-    },
-
     devtool: specialOptions.sourcemaps ? 'cheap-module-source-map' : null,
 
     plugins,

package.json

@@ -48,6 +48,7 @@
     "matcher": "^0.1.2",
     "memoizee": "0.4.1",
     "promise-worker": "^1.1.1",
+    "prop-types": "^15.5.10",
     "react": "^15.4.0",
     "react-addons-perf": "0.14.8",
     "react-addons-shallow-compare": "0.14.8",
@@ -77,10 +78,10 @@
     "yaml-js": "0.2.0"
   },
   "devDependencies": {
-    "autoprefixer": "6.6.1",
+    "autoprefixer": "7.1.1",
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.3.2",
+    "babel-loader": "^7.1.0",
     "babel-plugin-module-alias": "^1.6.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.22.0",
@@ -88,42 +89,43 @@
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-0": "^6.22.0",
     "babel-runtime": "^6.23.0",
-    "css-loader": "0.22.0",
-    "deep-extend": "^0.4.1",
+    "css-loader": "0.28.4",
+    "deep-extend": "^0.5.0",
     "deepmerge": "^1.3.2",
     "enzyme": "^2.7.1",
-    "eslint": "^2.13.1",
-    "eslint-plugin-react": "^6.10.3",
-    "extract-text-webpack-plugin": "0.8.2",
-    "file-loader": "0.8.4",
+    "eslint": "^4.1.1",
+    "eslint-plugin-import": "^2.6.0",
+    "eslint-plugin-react": "^7.1.0",
+    "extract-text-webpack-plugin": "^2.1.2",
+    "file-loader": "0.11.2",
     "git-describe": "^4.0.1",
     "html-webpack-plugin": "^2.28.0",
-    "imports-loader": "0.6.5",
-    "json-loader": "0.5.3",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-mocha": "^0.2.2",
+    "imports-loader": "0.7.1",
+    "json-loader": "0.5.4",
+    "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-mocha": "^1.3.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "1.8.0",
-    "less": "2.5.3",
-    "less-loader": "2.2.1",
-    "license-checker": "^8.0.4",
-    "mocha": "^2.5.3",
+    "karma-webpack": "2.0.3",
+    "less": "2.7.2",
+    "less-loader": "4.0.4",
+    "license-checker": "^11.0.0",
+    "mocha": "^3.4.2",
     "node-sass": "^4.5.0",
-    "npm-run-all": "3.1.1",
+    "npm-run-all": "4.0.2",
     "null-loader": "0.1.1",
     "open": "0.0.5",
-    "postcss-loader": "0.7.0",
+    "postcss-loader": "2.0.6",
     "raw-loader": "0.5.1",
     "react-hot-loader": "^1.3.1",
     "react-test-renderer": "^15.5.4",
     "rimraf": "^2.6.0",
     "sass-loader": "^6.0.2",
-    "standard": "^8.6.0",
-    "standard-loader": "^5.0.0",
-    "style-loader": "0.13.0",
-    "url-loader": "0.5.6",
-    "webpack": "^1.14.0",
+    "standard": "^10.0.2",
+    "standard-loader": "^6.0.1",
+    "style-loader": "0.18.2",
+    "url-loader": "0.5.9",
+    "webpack": "^2.6.1",
     "webpack-bundle-size-analyzer": "^2.5.0"
   },
   "config": {
@@ -135,6 +137,6 @@
     "IE 11"
   ],
   "optionalDependencies": {
-    "webpack-dev-server": "1.14.0"
+    "webpack-dev-server": "2.5.0"
   }
 }

postcss.config.js

@@ -0,0 +1 @@
+module.exports = {};

src/core/components/app.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class App extends React.Component {
 
@@ -6,7 +7,7 @@ export default class App extends React.Component {
     let { getComponent, layoutSelectors } = this.props
     const layoutName = layoutSelectors.current()
     const Component = getComponent(layoutName, true)
-    return Component ? Component : ()=> <h1> No layout defined for "{layoutName}" </h1>
+    return Component ? Component : ()=> <h1> No layout defined for &quot;{layoutName}&quot; </h1>
   }
 
   render() {

src/core/components/auth/api-key-auth.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class ApiKeyAuth extends React.Component {
   static propTypes = {

src/core/components/auth/authorization-popup.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class AuthorizationPopup extends React.Component {
   close =() => {

src/core/components/auth/authorize-btn.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class AuthorizeBtn extends React.Component {
   static propTypes = {

src/core/components/auth/authorize-operation-btn.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 export default class AuthorizeOperationBtn extends React.Component {

src/core/components/auth/auths.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 export default class Auths extends React.Component {

src/core/components/auth/basic-auth.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 export default class BasicAuth extends React.Component {

src/core/components/auth/error.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class AuthError extends React.Component {
 

src/core/components/auth/oauth2.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import oauth2Authorize from "core/oauth2-authorize"
 
 const IMPLICIT = "implicit"

src/core/components/clear.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 
 export default class Clear extends Component {
 

src/core/components/content-type.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { fromJS } from "immutable"
 

src/core/components/curl.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import curlify from "core/curlify"
 
 export default class Curl extends React.Component {

src/core/components/debug.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import Collapse from "react-collapse"
 import { presets } from "react-motion"
 import ObjectInspector from "react-object-inspector"

src/core/components/errors.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { List } from "immutable"
 import Collapse from "react-collapse"
 

src/core/components/execute.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 
 export default class Execute extends Component {
 

src/core/components/headers.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import Im from "immutable"
 
 export default class Headers extends React.Component {

src/core/components/highlight-code.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import { highlight } from "core/utils"
 
 export default class HighlightCode extends Component {
@@ -8,17 +9,21 @@ export default class HighlightCode extends Component {
   }
 
   componentDidMount() {
-    highlight(this.refs.el)
+    highlight(this.el)
   }
 
   componentDidUpdate() {
-    highlight(this.refs.el)
+    highlight(this.el)
+  }
+
+  initializeComponent = (c) => {
+    this.el = c
   }
 
   render () {
     let { value, className } = this.props
     className = className || ""
 
-    return <pre ref="el" className={className + " microlight"}>{ value }</pre>
+    return <pre ref={this.initializeComponent} className={className + " microlight"}>{ value }</pre>
   }
 }

src/core/components/info.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { fromJS } from "immutable"
 import ImPropTypes from "react-immutable-proptypes"
 

src/core/components/layout-utils.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import OriCollapse from "react-collapse"
 
 function xclass(...args) {

src/core/components/layouts/base.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class BaseLayout extends React.Component {
 

src/core/components/layouts/xpane.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class XPane extends React.Component {
 

src/core/components/live-response.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 const Headers = ( { headers } )=>{

src/core/components/model-example.jsx

@@ -1,5 +1,5 @@
-import React, { PropTypes } from "react"
-
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class ModelExample extends React.Component {
   static propTypes = {

src/core/components/model.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { List } from "immutable"
 const braceOpen = "{"

src/core/components/models.jsx

@@ -1,5 +1,5 @@
-import React, { Component, PropTypes } from "react"
-
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 
 export default class Models extends Component {
   static propTypes = {

src/core/components/online-validator-badge.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class OnlineValidatorBadge extends React.Component {
     static propTypes = {

src/core/components/operation.jsx

@@ -1,4 +1,5 @@
-import React, { PureComponent, PropTypes } from "react"
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
 import { getList } from "core/utils"
 import * as CustomPropTypes from "core/proptypes"
 

src/core/components/operations.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class Operations extends React.Component {
 

src/core/components/overview.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { Link } from "core/components/layout-utils"
 
 export default class Overview extends React.Component {

src/core/components/param-body.jsx

@@ -1,4 +1,5 @@
-import React, { PureComponent, PropTypes } from "react"
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
 import { fromJS, List } from "immutable"
 import { getSampleSchema } from "core/utils"
 

src/core/components/parameter-row.jsx

@@ -1,7 +1,7 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import win from "core/window"
 
-
 export default class ParameterRow extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,

src/core/components/parameters.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import Im from "immutable"
 

src/core/components/providers/markdown.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import Remarkable from "react-remarkable"
 import sanitize from "sanitize-html"
 

src/core/components/response-body.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { formatXml } from "core/utils"
 import lowerCase from "lodash/lowerCase"
 

src/core/components/response.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { fromJS } from "immutable"
 import { getSampleSchema } from "core/utils"
 

src/core/components/responses.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { fromJS } from "immutable"
 import { defaultStatusCode } from "core/utils"
 

src/core/components/schemes.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class Schemes extends React.Component {
 

src/core/components/try-it-out-button.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class TryItOutButton extends React.Component {
 

src/core/json-schema-components.js

@@ -1,4 +1,5 @@
-import React, { PropTypes, PureComponent, Component } from "react"
+import React, { PureComponent, Component } from "react"
+import PropTypes from "prop-types"
 import { List, fromJS } from "immutable"
 //import "less/json-schema-form"
 

src/core/plugins/split-pane-mode/components/split-pane-mode.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import SplitPane from "react-split-pane"
 import "./split-pane-mode.less"
 
@@ -23,9 +24,13 @@ export default class SplitPaneMode extends React.Component {
     children: [],
   };
 
+  initializeComponent = (c) => {
+    this.splitPane = c
+  }
+
   onDragFinished = () => {
     let { threshold, layoutActions } = this.props
-    let { position, draggedSize } = this.refs.splitPane.state
+    let { position, draggedSize } = this.splitPane.state
     this.draggedSize = draggedSize
 
     let nearLeftEdge = position <= threshold
@@ -62,7 +67,7 @@ export default class SplitPaneMode extends React.Component {
     return (
       <SplitPane
         disabledClass={""}
-        ref={"splitPane"}
+        ref={this.initializeComponent}
         split='vertical'
         defaultSize={"50%"}
         primary="second"

src/core/plugins/view/root-injects.js

@@ -65,11 +65,11 @@ export const render = (getSystem, getStore, getComponent, getComponents, dom) =>
 }
 
 // Render try/catch wrapper
-const createClass = component => React.createClass({
+const createClass = component => class extends Component {
   render() {
     return component(this.props)
   }
-})
+}
 
 const Fallback = ({ name }) => <div style={{ // eslint-disable-line react/prop-types
     padding: "1em",

src/core/proptypes.js

@@ -1,4 +1,4 @@
-import { PropTypes } from "react"
+import PropTypes from "prop-types"
 
 // Takes a list and proptype, and returns a PropType.shape({ [item]: propType })
 const mapListToPropTypeShape = (list, propType) => PropTypes.shape(

src/core/system.js

@@ -240,7 +240,7 @@ export default class Store {
           action = {type: NEW_THROWN_ERR, error: true, payload: serializeError(e) }
         }
         finally{
-          return action
+          return action // eslint-disable-line no-unsafe-finally
         }
       }
 

src/core/utils.js

@@ -343,7 +343,7 @@ export function highlight (el) {
         while (![
           1,                   //  0: whitespace
                                //  1: operator or braces
-          /[\/{}[(\-+*=<>:;|\\.,?!&@~]/[test](chr),
+          /[\/{}[(\-+*=<>:;|\\.,?!&@~]/[test](chr),   // eslint-disable-line no-useless-escape
           /[\])]/[test](chr),  //  2: closing brace
           /[$\w]/[test](chr),  //  3: (key)word
           chr == "/" &&        //  4: regex

src/plugins/topbar/topbar.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 //import "./topbar.less"
 import Logo from "./logo_small.png"

src/standalone/layout.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class StandaloneLayout extends React.Component {
 

test/core/plugins/err/transformers/parameter-oneof.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-useless-escape */
 import expect from "expect"
 import { fromJS } from "immutable"
 import { transform } from "corePlugins/err/error-transformers/transformers/parameter-oneof"

webpack-dist-bundle.config.js

@@ -1,14 +1,58 @@
 var path = require('path')
+var rules = [
+  { test: /\.(worker\.js)(\?.*)?$/,
+    use: [
+      {
+        loader: 'worker-loader',
+        options: {
+          inline: true,
+          name: '[name].js'
+        }
+      },
+      { loader: 'babel-loader' }
+    ]
+  },
+  { test: /\.(css)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      'postcss-loader'
+    ]
+  },
+  { test: /\.(scss)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+        options: { sourceMap: true }
+      },
+      { loader: 'sass-loader',
+        options: {
+          outputStyle: 'expanded',
+          sourceMap: true,
+          sourceMapContents: 'true'
+        }
+      }
+    ]
+  },
+  { test: /\.(less)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+      },
+      'less-loader'
+    ]
+  }
+]
 
-
-module.exports = require('./make-webpack-config.js')({
+module.exports = require('./make-webpack-config.js')(rules, {
   _special: {
     separateStylesheets: false,
     minimize: true,
     sourcemaps: true,
-    loaders: {
-      "worker.js": ["worker-loader?inline=true&name=[name].js", "babel"]
-    }
   },
 
   entry: {

webpack-dist-standalone.config.js

@@ -1,14 +1,59 @@
 var path = require('path')
 
+var rules = [
+  { test: /\.(worker\.js)(\?.*)?$/,
+    use: [
+      {
+        loader: 'worker-loader',
+        options: {
+          inline: true,
+          name: '[name].js'
+        }
+      },
+      { loader: 'babel-loader' }
+    ]
+  },
+  { test: /\.(css)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      'postcss-loader'
+    ]
+  },
+  { test: /\.(scss)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+        options: { sourceMap: true }
+      },
+      { loader: 'sass-loader',
+        options: {
+          outputStyle: 'expanded',
+          sourceMap: true,
+          sourceMapContents: 'true'
+        }
+      }
+    ]
+  },
+  { test: /\.(less)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+      },
+      'less-loader'
+    ]
+  }
+]
 
-module.exports = require('./make-webpack-config.js')({
+module.exports = require('./make-webpack-config.js')(rules, {
   _special: {
     separateStylesheets: false,
     minimize: true,
     sourcemaps: true,
-    loaders: {
-      "worker.js": ["worker-loader?inline=true&name=[name].js", "babel"]
-    }
   },
 
   entry: {

webpack-dist.config.js

@@ -1,15 +1,70 @@
-const path = require("path")
-const fs = require("fs")
+var path = require('path')
+var fs = require('fs')
 const nodeModules = fs.readdirSync("node_modules").filter(function(x) { return x !== ".bin" })
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
-module.exports = require("./make-webpack-config.js")({
+var rules = [
+  { test: /\.(worker\.js)(\?.*)?$/,
+    use: [
+      {
+        loader: 'worker-loader',
+        options: {
+          inline: true,
+          name: '[name].js'
+        }
+      },
+      { loader: 'babel-loader' }
+    ]
+  },
+  { test: /\.(css)(\?.*)?$/,
+    use: ExtractTextPlugin.extract({
+      fallback: 'style-loader',
+      use: [
+        'css-loader',
+        'postcss-loader'
+      ]
+    })
+  },
+  { test: /\.(scss)(\?.*)?$/,
+    use: ExtractTextPlugin.extract({
+      fallback: 'style-loader',
+      use: [
+        {
+          loader: 'css-loader',
+          options: { minimize: true }
+        },
+        {
+          loader: 'postcss-loader',
+          options: { sourceMap: true }
+        },
+        { loader: 'sass-loader',
+          options: {
+            outputStyle: 'expanded',
+            sourceMap: true,
+            sourceMapContents: 'true'
+          }
+        }
+      ]
+    })
+  },
+  { test: /\.(less)(\?.*)?$/,
+    use: ExtractTextPlugin.extract({
+      fallback: 'style-loader',
+      use: ['css-loader',
+        {
+          loader: 'postcss-loader',
+        },
+        'less-loader'
+      ]
+    })
+  }
+]
+
+module.exports = require('./make-webpack-config.js')(rules, {
   _special: {
     separateStylesheets: true,
     minimize: true,
     sourcemaps: true,
-    loaders: {
-      "worker.js": ["worker-loader?inline=true&name=[name].js", "babel"]
-    }
   },
 
   entry: {

webpack-hot-dev-server.config.js

@@ -1,10 +1,61 @@
 var path = require('path')
 
-module.exports = require("./make-webpack-config")({
+var rules = [
+  { test: /\.(worker\.js)(\?.*)?$/,
+    use: [
+      {
+        loader: 'worker-loader',
+        options: {
+          inline: true
+        }
+      },
+      { loader: 'babel-loader' }
+    ]
+  },
+  { test: /\.(jsx)(\?.*)?$/,
+    use: [
+      { loader: 'react-hot-loader' }, 
+      { loader: 'babel-loader' }
+    ]
+  },
+  { test: /\.(css)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      'postcss-loader'
+    ]
+  },
+  { test: /\.(scss)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+        options: { sourceMap: true }
+      },
+      { loader: 'sass-loader',
+        options: {
+          outputStyle: 'expanded',
+          sourceMap: true,
+          sourceMapContents: 'true'
+        }
+      }
+    ]
+  },
+  { test: /\.(less)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+      },
+      'less-loader'
+    ]
+  }
+]
+
+module.exports = require("./make-webpack-config")(rules, {
   _special: {
-    loaders: {
-      'jsx': [ "react-hot-loader", "babel" ]
-    },
     separateStylesheets: false,
   },
 	devtool: "eval",
@@ -14,14 +65,12 @@ module.exports = require("./make-webpack-config")({
       './src/core/index.js'
     ],
     'swagger-ui-standalone-preset': [
-      'webpack/hot/dev-server',
       './src/polyfills',
       './src/standalone/index.js',
     ]
   },
   output: {
     pathinfo: true,
-    debug: true,
     filename: '[name].js',
     library: "[name]",
     libraryTarget: "umd",
@@ -29,10 +78,9 @@ module.exports = require("./make-webpack-config")({
   },
   devServer: {
     port: 3200,
-    path: path.join(__dirname, 'dev-helpers'),
+    contentBase: path.join(__dirname, 'dev-helpers'),
     publicPath: "/",
     noInfo: true,
-    colors: true,
     hot: true,
     stats: {
       colors: true