Upgrade webpack (#86)

* Upgrade webpack

Fixes #83

* Transform modules in tests

* rc1 of extract text

* rc2 of extract text

* stable of extract text

* last dep bumps

* Add ModuleConcatenationPlugin

* Fix lint error

frontend/.babelrc

@@ -1,9 +1,12 @@
 {
-  "presets": ["react", "es2015", "stage-2"],
+  "presets": ["react", ["es2015", {"modules": false}], "stage-2"],
   "plugins": ["transform-decorators-legacy"],
   "env": {
     "development": {
       "presets": ["react-hmre"]
+    },
+    "test": {
+      "plugins": ["transform-es2015-modules-commonjs"]
     }
   }
 }

frontend/package.json

@@ -25,11 +25,11 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "rm -rf dist && mkdir -p dist/public && npm run build:assets && npm run build:html && npm run build:img && npm run build:ico",
-    "build:assets": "NODE_ENV=production webpack -p",
+    "build:assets": "NODE_ENV=production webpack -p --display-optimization-bailout",
     "build:html": "cp public/*.html dist/.",
     "build:ico": "cp public/*.ico dist/.",
     "build:img": "cp public/*.png dist/public/.",
-    "start": "NODE_ENV=development webpack-dev-server --config webpack.config.js --progress --colors",
+    "start": "NODE_ENV=development webpack-dev-server --progress --colors --display-optimization-bailout",
     "start:heroku": "UNLEASH_API=http://unleash.herokuapp.com npm run start",
     "lint": "eslint . --ext js,jsx",
     "test": "jest",
@@ -59,30 +59,29 @@
   "devDependencies": {
     "babel-core": "^6.14.0",
     "babel-eslint": "^7.1.0",
-    "babel-loader": "^6.2.5",
+    "babel-loader": "^7.1.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-0": "^6.5.0",
     "babel-preset-stage-2": "^6.13.0",
-    "css-loader": "^0.25.0",
+    "css-loader": "^0.28.4",
     "eslint": "^4.1.1",
     "eslint-config-finn": "^2.0.0",
     "eslint-config-finn-react": "^2.0.0",
     "eslint-plugin-react": "^7.1.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^3.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^20.0.4",
-    "node-sass": "~3.12.1",
+    "node-sass": "^4.5.3",
-    "postcss-loader": "^0.13.0",
     "react-test-renderer": "^15.4.2",
     "redux-devtools": "^3.3.1",
-    "sass-loader": "^4.0.2",
+    "sass-loader": "^6.0.6",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.18.2",
     "toolbox-loader": "0.0.3",
-    "webpack": "^1.13.2",
+    "webpack": "^3.1.0",
-    "webpack-dev-server": "^1.15.1"
+    "webpack-dev-server": "^2.5.1"
   },
   "jest": {
     "moduleNameMapper": {

frontend/src/component/feature/form/strategy-configure.jsx

@@ -164,8 +164,8 @@ class StrategyConfigure extends React.Component {
                     </CardText>
                     {
                         inputFields && <CardActions border style={{ padding: '20px' }}>
-                        {inputFields}
+                            {inputFields}
-                    </CardActions>
+                        </CardActions>
                     }
 
                     <CardMenu className="mdl-color-text--white">

frontend/src/data/applications-api.js

@@ -34,7 +34,7 @@ function storeApplicationMetaData (appName, key, value) {
     }).then(throwIfNotSuccess);
 }
 
-module.exports = {
+export default {
     fetchApplication,
     fetchAll,
     fetchApplicationsWithStrategyName,

frontend/src/data/archive-api.js

@@ -17,7 +17,7 @@ function revive (featureName) {
 }
 
 
-module.exports = {
+export default {
     fetchAll,
     revive,
 };

frontend/src/data/client-instance-api.js

@@ -8,6 +8,6 @@ function fetchAll () {
         .then(response => response.json());
 }
 
-module.exports = {
+export default {
     fetchAll,
 };

frontend/src/data/feature-api.js

@@ -65,7 +65,7 @@ function remove (featureToggleName) {
     }).then(throwIfNotSuccess);
 }
 
-module.exports = {
+export default {
     fetchAll,
     create,
     validate,

frontend/src/data/feature-metrics-api.js

@@ -16,7 +16,7 @@ function fetchSeenApps () {
         .then(response => response.json());
 }
 
-module.exports = {
+export default {
     fetchFeatureMetrics,
     fetchSeenApps,
 };

frontend/src/data/history-api.js

@@ -14,7 +14,7 @@ function fetchHistoryForToggle (toggleName) {
         .then(response => response.json());
 }
 
-module.exports = {
+export default {
     fetchAll,
     fetchHistoryForToggle,
 };

frontend/src/data/strategy-api.js

@@ -34,7 +34,7 @@ function remove (strategy) {
     }).then(throwIfNotSuccess);
 }
 
-module.exports = {
+export default {
     fetchAll,
     create,
     update,

frontend/src/store/strategy/actions.js

@@ -1,5 +1,5 @@
 import api from '../../data/strategy-api';
-import { fetchApplicationsWithStrategyName } from '../../data/applications-api';
+import applicationApi from '../../data/applications-api';
 
 export const ADD_STRATEGY = 'ADD_STRATEGY';
 export const UPDATE_STRATEGY = 'UPDATE_STRATEGY';
@@ -83,6 +83,6 @@ export function removeStrategy (strategy) {
 }
 
 export function getApplicationsWithStrategy (strategyName) {
-    return fetchApplicationsWithStrategyName(strategyName);
+    return applicationApi.fetchApplicationsWithStrategyName(strategyName);
 }
 

frontend/webpack.config.js

@@ -13,6 +13,7 @@ const plugins = [
             NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
         },
     }),
+    new webpack.optimize.ModuleConcatenationPlugin(),
 ];
 
 if (process.env.NODE_ENV === 'development') {
@@ -25,8 +26,7 @@ module.exports = {
     entry,
 
     resolve: {
-        root: [path.join(__dirname, 'src')],
+        extensions: ['.scss', '.css', '.js', '.jsx', '.json'],
-        extensions: ['', '.scss', '.css', '.js', '.jsx', '.json'],
     },
 
     output: {
@@ -36,38 +36,48 @@ module.exports = {
     },
 
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.jsx?$/,
                 exclude: /node_modules/,
-                loader: 'babel',
+                loader: 'babel-loader',
                 include: path.join(__dirname, 'src'),
             },
             {
                 test: /(\.scss)$/,
-                loader: ExtractTextPlugin.extract('style',
+                loader: ExtractTextPlugin.extract({
-                    'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'),
+                    fallback: 'style-loader',
+                    use: [
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                sourceMap: true,
+                                modules: true,
+                                importLoaders: 1,
+                                localIdentName: '[name]__[local]___[hash:base64:5]',
+                            },
+                        },
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                // data: '@import "theme/_config.scss";',
+                                includePaths: [path.resolve(__dirname, './src')],
+                            },
+                        },
+                    ],
+                }),
             },
             {
                 test: /\.css$/,
-                loader: ExtractTextPlugin.extract('style', 'css'),
+                loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
             },
         ],
     },
 
     plugins,
 
-    sassLoader: {
-        // data: '@import "theme/_config.scss";',
-        includePaths: [path.resolve(__dirname, './src')],
-    },
-
     devtool: 'source-map',
 
-    externals: {
-        // stuff not in node_modules can be resolved here.
-    },
-
     devServer: {
         proxy: {
             '/api': {