Migrated Webpack to 4.x, upgrated React and React-DOM to 16.4.1

.travis.yml

@@ -1,8 +1,9 @@
 language: node_js
 node_js:
+  - 9
+  - 8
   - 7
   - 6
-  - 4
 before_install:
   - currentfolder=${PWD##*/}
   - if [ "$currentfolder" != 'react-webpack-template' ]; then cd .. && eval "mv $currentfolder react-webpack-template" && cd react-webpack-template; fi

cfg/base.js

@@ -10,34 +10,37 @@ let defaultSettings = require('./defaults');
 let additionalPaths = [];
 
 module.exports = {
-  additionalPaths: additionalPaths,
-  port: defaultSettings.port,
-  debug: true,
-  devtool: 'eval',
-  output: {
-    path: path.join(__dirname, '/../dist/assets'),
-    filename: 'app.js',
-    publicPath: defaultSettings.publicPath
+  pureConfig: {
+       devtool: 'eval',
+    output: {
+      path: path.join(__dirname, '/../dist/assets'),
+      filename: 'app.js',
+      publicPath: defaultSettings.publicPath
+    },
+    devServer: {
+      contentBase: './src/',
+      historyApiFallback: true,
+      hot: true,
+      port: defaultSettings.port,
+      publicPath: defaultSettings.publicPath,
+      noInfo: false
+    },
+    resolve: {
+      extensions: ['.js', '.jsx'],
+      alias: {
+        actions: `${defaultSettings.srcPath}/actions/`,
+        components: `${defaultSettings.srcPath}/components/`,
+        sources: `${defaultSettings.srcPath}/sources/`,
+        stores: `${defaultSettings.srcPath}/stores/`,
+        styles: `${defaultSettings.srcPath}/styles/`,
+        config: `${defaultSettings.srcPath}/config/` + process.env.REACT_WEBPACK_ENV,
+        'react/lib/ReactMount': 'react-dom/lib/ReactMount'
+      }
+    },
+    module: {}
   },
-  devServer: {
-    contentBase: './src/',
-    historyApiFallback: true,
-    hot: true,
+  extras: {
     port: defaultSettings.port,
-    publicPath: defaultSettings.publicPath,
-    noInfo: false
-  },
-  resolve: {
-    extensions: ['', '.js', '.jsx'],
-    alias: {
-      actions: `${defaultSettings.srcPath}/actions/`,
-      components: `${defaultSettings.srcPath}/components/`,
-      sources: `${defaultSettings.srcPath}/sources/`,
-      stores: `${defaultSettings.srcPath}/stores/`,
-      styles: `${defaultSettings.srcPath}/styles/`,
-      config: `${defaultSettings.srcPath}/config/` + process.env.REACT_WEBPACK_ENV,
-      'react/lib/ReactMount': 'react-dom/lib/ReactMount'
-    }
-  },
-  module: {}
+    additionalPaths: additionalPaths,
+  }
 };

cfg/defaults.js

@@ -16,14 +16,13 @@ const dfltPort = 8000;
  */
 function getDefaultModules() {
   return {
-    preLoaders: [
-      {
-        test: /\.(js|jsx)$/,
-        include: srcPath,
-        loader: 'eslint-loader'
-      }
-    ],
-    loaders: [
+    rules: [
+      // {
+      //   enforce: 'pre',
+      //   test: /\.(js|jsx)$/,
+      //   include: srcPath,
+      //   loader: 'eslint-loader'
+      // },
       {
         test: /\.css$/,
         loader: 'style-loader!css-loader'

cfg/dev.js

@@ -1,14 +1,14 @@
-'use strict';
 
+'use strict';
 let path = require('path');
 let webpack = require('webpack');
 let baseConfig = require('./base');
 let defaultSettings = require('./defaults');
 
 // Add needed plugins here
-let BowerWebpackPlugin = require('bower-webpack-plugin');
 
-let config = Object.assign({}, baseConfig, {
+let config = Object.assign({}, baseConfig.pureConfig, {
+  mode: 'development',
   entry: [
     'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port,
     'webpack/hot/only-dev-server',
@@ -18,22 +18,23 @@ let config = Object.assign({}, baseConfig, {
   devtool: 'eval-source-map',
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-    new BowerWebpackPlugin({
-      searchResolveModulesDirectories: false
-    })
+    new webpack.LoaderOptionsPlugin({ options: {} }),
+    new webpack.NoEmitOnErrorsPlugin(),
   ],
   module: defaultSettings.getDefaultModules()
 });
 
-// Add needed loaders to the defaults here
-config.module.loaders.push({
+// Add needed rules (loaders in Webpack 1.x) to the defaults here
+config.module.rules.push({
   test: /\.(js|jsx)$/,
-  loader: 'react-hot!babel-loader',
+  loader: 'react-hot-loader/webpack!babel-loader',
   include: [].concat(
-    config.additionalPaths,
+    baseConfig.extras.additionalPaths,
     [ path.join(__dirname, '/../src') ]
   )
 });
 
-module.exports = config;
+module.exports = {
+  pureConfig: config,
+  extras: baseConfig.extras,
+};

cfg/dist.js

@@ -7,34 +7,29 @@ let baseConfig = require('./base');
 let defaultSettings = require('./defaults');
 
 // Add needed plugins here
-let BowerWebpackPlugin = require('bower-webpack-plugin');
 
-let config = Object.assign({}, baseConfig, {
+let config = Object.assign({}, baseConfig.pureConfig, {
+  mode: 'production',
   entry: path.join(__dirname, '../src/index'),
   cache: false,
   devtool: 'sourcemap',
   plugins: [
-    new webpack.optimize.DedupePlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"'
     }),
-    new BowerWebpackPlugin({
-      searchResolveModulesDirectories: false
-    }),
-    new webpack.optimize.UglifyJsPlugin(),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.optimize.AggressiveMergingPlugin(),
-    new webpack.NoErrorsPlugin()
+    new webpack.NoEmitOnErrorsPlugin(),
   ],
   module: defaultSettings.getDefaultModules()
 });
 
-// Add needed loaders to the defaults here
-config.module.loaders.push({
+// Add needed rules (loaders in Webpack 1.x) to the defaults here
+config.module.rules.push({
   test: /\.(js|jsx)$/,
-  loader: 'babel',
+  loader: 'babel-loader',
   include: [].concat(
-    config.additionalPaths,
+    baseConfig.extras.additionalPaths,
     [ path.join(__dirname, '/../src') ]
   )
 });

cfg/test.js

@@ -6,21 +6,23 @@ let srcPath = path.join(__dirname, '/../src/');
 let baseConfig = require('./base');
 
 // Add needed plugins here
-let BowerWebpackPlugin = require('bower-webpack-plugin');
 
 module.exports = {
   devtool: 'eval',
+  mode: 'development',
   module: {
-    preLoaders: [
+    rules: [
       {
+        enforce: 'pre',
         test: /\.(js|jsx)$/,
-        loader: 'isparta-instrumenter-loader',
+        loader: 'istanbul-instrumenter-loader',
+        query: {
+          esModules: true
+        },
         include: [
           path.join(__dirname, '/../src')
         ]
-      }
-    ],
-    loaders: [
+      },
       {
         test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl)$/,
         loader: 'null-loader'
@@ -29,7 +31,7 @@ module.exports = {
         test: /\.(js|jsx)$/,
         loader: 'babel-loader',
         include: [].concat(
-          baseConfig.additionalPaths,
+          baseConfig.extras.additionalPaths,
           [
             path.join(__dirname, '/../src'),
             path.join(__dirname, '/../test')
@@ -39,7 +41,7 @@ module.exports = {
     ]
   },
   resolve: {
-    extensions: [ '', '.js', '.jsx' ],
+    extensions: [ '.js', '.jsx' ],
     alias: {
       actions: srcPath + 'actions/',
       helpers: path.join(__dirname, '/../test/helpers'),
@@ -50,9 +52,5 @@ module.exports = {
       config: srcPath + 'config/' + process.env.REACT_WEBPACK_ENV
     }
   },
-  plugins: [
-    new BowerWebpackPlugin({
-      searchResolveModulesDirectories: false
-    })
-  ]
+  plugins: []
 };

package.json

@@ -38,46 +38,46 @@
   "devDependencies": {
     "babel-core": "^6.0.0",
     "babel-eslint": "^6.0.0",
-    "babel-loader": "^6.0.0",
+    "babel-loader": "^7.1.5",
     "babel-polyfill": "^6.3.14",
     "babel-preset-es2015": "^6.0.15",
     "babel-preset-react": "^6.0.15",
     "babel-preset-stage-0": "^6.5.0",
-    "bower-webpack-plugin": "^0.1.9",
     "chai": "^3.2.0",
     "copyfiles": "^1.0.0",
     "css-loader": "^0.23.0",
     "eslint": "^3.0.0",
-    "eslint-loader": "^1.0.0",
+    "eslint-loader": "^1.9.0",
     "eslint-plugin-react": "^6.0.0",
-    "file-loader": "^0.9.0",
+    "file-loader": "^1.1.11",
     "glob": "^7.0.0",
-    "isparta-instrumenter-loader": "^1.0.0",
+    "istanbul-instrumenter-loader": "^3.0.1",
     "karma": "^1.0.0",
     "karma-chai": "^0.1.0",
     "karma-coverage": "^1.0.0",
     "karma-mocha": "^1.0.0",
     "karma-mocha-reporter": "^2.0.0",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.5",
-    "karma-webpack": "^1.7.0",
+    "karma-webpack": "^3.0.0",
     "minimist": "^1.2.0",
     "mocha": "^3.0.0",
     "null-loader": "^0.1.1",
     "open": "0.0.5",
     "phantomjs-prebuilt": "^2.0.0",
-    "react-addons-test-utils": "^15.0.0",
-    "react-hot-loader": "^1.2.9",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-test-renderer": "^16.4.2",
     "rimraf": "^2.4.3",
     "style-loader": "^0.13.0",
-    "url-loader": "^0.5.6",
-    "webpack": "^1.12.0",
-    "webpack-dev-server": "^1.12.0"
+    "url-loader": "^0.5.9",
+    "webpack": "^4.0.0",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.5"
   },
   "dependencies": {
     "core-js": "^2.0.0",
     "normalize.css": "^4.0.0",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
   }
 }

server.js

@@ -12,23 +12,23 @@ const open = require('open');
  */
 let isInitialCompilation = true;
 
-const compiler = webpack(config);
+const compiler = webpack(config.pureConfig);
 
-new WebpackDevServer(compiler, config.devServer)
-.listen(config.port, 'localhost', (err) => {
+new WebpackDevServer(compiler, config.pureConfig.devServer)
+.listen(config.extras.port, 'localhost', (err) => {
   if (err) {
     console.log(err);
   }
-  console.log('Listening at localhost:' + config.port);
+  console.log('Listening at localhost:' + config.extras.port);
 });
 
 compiler.plugin('done', () => {
   if (isInitialCompilation) {
     // Ensures that we log after webpack printed its stats (is there a better way?)
     setTimeout(() => {
       console.log('\n✓ The bundle is now ready for serving!\n');
-      console.log('  Open in iframe mode:\t\x1b[33m%s\x1b[0m',  'http://localhost:' + config.port + '/webpack-dev-server/');
-      console.log('  Open in inline mode:\t\x1b[33m%s\x1b[0m', 'http://localhost:' + config.port + '/\n');
+      console.log('  Open in iframe mode:\t\x1b[33m%s\x1b[0m',  'http://localhost:' + config.extras.port + '/webpack-dev-server/');
+      console.log('  Open in inline mode:\t\x1b[33m%s\x1b[0m', 'http://localhost:' + config.extras.port + '/\n');
       console.log('  \x1b[33mHMR is active\x1b[0m. The bundle will automatically rebuild and live-update on changes.')
     }, 350);
   }

test/helpers/shallowRenderHelper.js

@@ -6,7 +6,8 @@
  * @author somonsmith
  */
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
+import ShallowRenderer from 'react-test-renderer/shallow'
 
 /**
  * Get the shallow rendered component
@@ -16,8 +17,9 @@ import TestUtils from 'react-addons-test-utils';
  * @param  {Mixed} ...children [optional] List of children
  * @return {Object} Shallow rendered output
  */
+
 export default function createComponent(component, props = {}, ...children) {
-  const shallowRenderer = TestUtils.createRenderer();
-  shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
-  return shallowRenderer.getRenderOutput();
+  const renderer = new ShallowRenderer();
+  renderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
+  return renderer.getRenderOutput();
 }