chore(package): update karma and webpack (#3383)

* chore(package): update karma and webpack

* cleanup config more

* cleanup config more

Author: layershifter

.babel-preset.js

@@ -61,7 +61,7 @@ module.exports = () => ({
     [
       '@babel/env',
       {
-        modules: isESBuild ? false : 'commonjs',
+        modules: isESBuild || isUMDBuild ? false : 'commonjs',
         targets: { browsers },
       },
     ],

config.js

@@ -43,7 +43,7 @@ const config = {
   // ----------------------------------
   // Compiler Configuration
   // ----------------------------------
-  compiler_devtool: (__DEV__ || __TEST__) && 'cheap-source-map',
+  compiler_devtool: (__DEV__ || __TEST__) && 'cheap-eval-source-map',
   compiler_globals: {
     'process.env': {
       NODE_ENV: JSON.stringify(env),

karma.conf.babel.js

@@ -91,12 +91,8 @@ export default (karmaConfig) => {
       'test/tests.bundle.js': ['webpack'],
     },
     webpack: {
+      ...webpackConfig,
       entry: './test/tests.bundle.js',
-      externals: webpackConfig.externals,
-      devtool: config.compiler_devtool,
-      module: webpackConfig.module,
-      plugins: webpackConfig.plugins,
-      resolve: webpackConfig.resolve,
     },
     webpackServer: {
       progress: false,

package.json

@@ -126,20 +126,20 @@
     "gulp-load-plugins": "^1.5.0",
     "gulp-util": "^3.0.8",
     "husky": "^0.14.3",
-    "imports-loader": "^0.7.1",
-    "karma": "^3.0.0",
+    "imports-loader": "^0.8.0",
+    "karma": "^3.1.4",
     "karma-chrome-launcher": "^2.2.0",
-    "karma-cli": "^1.0.1",
+    "karma-cli": "^2.0.0",
     "karma-coverage": "^1.1.2",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.5",
-    "karma-webpack-with-fast-source-maps": "^1.10.2",
+    "karma-webpack": "^4.0.0-rc.5",
     "leven": "^2.1.0",
     "lint-staged": "^7.2.2",
     "mocha": "^5.2.0",
     "prettier": "^1.15.3",
     "puppeteer": "^1.7.0",
-    "raw-loader": "^0.5.1",
+    "raw-loader": "^1.0.0",
     "react": "^16.6.0",
     "react-ace": "^6.2.0",
     "react-docgen": "^3.0.0-rc.1",
@@ -164,8 +164,9 @@
     "tslint-config-airbnb": "^5.11.0",
     "typescript": "^2.9.2",
     "vinyl": "^2.2.0",
-    "webpack": "^3.6.0",
-    "webpack-dev-middleware": "^1.12.0"
+    "webpack": "^4.28.4",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-middleware": "^3.5.0"
   },
   "peerDependencies": {
     "react": "^16.3.0",

static.webpack.js

@@ -1,5 +1,5 @@
 import path from 'path'
-import webpack from 'webpack'
+import webpack from 'react-static/node_modules/webpack'
 
 import config from './config'
 

test/specs/addons/Responsive/Responsive-test.js

@@ -164,29 +164,36 @@ describe('Responsive', () => {
 
   describe('render', () => {
     it('does not re render if fit does not change', () => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.minWidth + 1)
+
       const wrapper = mount(<Responsive {...Responsive.onlyTablet} />)
       const instance = wrapper.instance()
-      const spy = sandbox.spy(instance, 'render')
-      sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.minWidth + 1)
+      const render = sandbox.spy(instance, 'render')
+
       domEvent.fire(window, 'resize')
-      spy.should.not.have.been.called()
+      render.should.not.have.been.called()
     })
 
     it('re renders if fit changes', () => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.minWidth)
+
       const wrapper = mount(<Responsive {...Responsive.onlyTablet} />)
       const instance = wrapper.instance()
-      const spy = sandbox.spy(instance, 'render')
+      const render = sandbox.spy(instance, 'render')
+
       sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.minWidth - 1)
       domEvent.fire(window, 'resize')
-      spy.should.have.been.calledOnce()
+
+      render.should.have.been.calledOnce()
     })
 
     it('re renders when props change', () => {
       const wrapper = mount(<Responsive {...Responsive.onlyMobile} />)
       const instance = wrapper.instance()
-      const spy = sandbox.spy(instance, 'render')
+      const render = sandbox.spy(instance, 'render')
+
       wrapper.setProps({ as: 'h1' })
-      spy.should.have.been.called()
+      render.should.have.been.called()
     })
   })
 })

webpack.karma.config.js

@@ -4,14 +4,31 @@ const config = require('./config')
 const { paths } = config
 
 const webpackConfig = {
-  name: 'client',
-  target: 'web',
+  mode: 'development',
+  externals: {
+    '@babel/standalone': 'Babel',
+    lodash: '_',
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    'react-dom/server': 'ReactDOMServer',
+  },
   devtool: config.compiler_devtool,
   module: {
-    noParse: [],
-    rules: [],
+    noParse: [/typescript\/lib/],
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+          },
+        },
+      },
+    ],
   },
-  plugins: [],
+  plugins: [new webpack.DefinePlugin(config.compiler_globals)],
   resolve: {
     modules: [paths.base(), 'node_modules'],
     alias: {
@@ -20,59 +37,4 @@ const webpackConfig = {
   },
 }
 
-// ------------------------------------
-// Bundle Output
-// ------------------------------------
-webpackConfig.output = {
-  ...webpackConfig.output,
-  filename: `[name].[${config.compiler_hash_type}].js`,
-  path: config.compiler_output_path,
-  pathinfo: true,
-  publicPath: config.compiler_public_path,
-}
-
-// ------------------------------------
-// Plugins
-// ------------------------------------
-webpackConfig.plugins = [
-  ...webpackConfig.plugins,
-  new webpack.DefinePlugin(config.compiler_globals),
-]
-
-// ------------------------------------
-// Externals
-// ------------------------------------
-webpackConfig.externals = {
-  '@babel/standalone': 'Babel',
-  lodash: '_',
-  react: 'React',
-  'react-dom': 'ReactDOM',
-  'react-dom/server': 'ReactDOMServer',
-}
-
-// ------------------------------------
-// No Parse
-// ------------------------------------
-webpackConfig.module.noParse = [...webpackConfig.module.noParse, /\.json$/, /typescript\/lib/]
-
-// ------------------------------------
-// Rules
-// ------------------------------------
-webpackConfig.module.rules = [
-  ...webpackConfig.module.rules,
-  {
-    //
-    // Babel
-    //
-    test: /\.js$/,
-    exclude: /node_modules/,
-    use: {
-      loader: 'babel-loader',
-      options: {
-        cacheDirectory: true,
-      },
-    },
-  },
-]
-
 module.exports = webpackConfig

webpack.umd.config.js

@@ -2,7 +2,6 @@ const webpack = require('webpack')
 
 const config = require('./config')
 const pkg = require('./package.json')
-const webpackConfig = require('./webpack.karma.config')
 
 const { paths } = config
 
@@ -16,6 +15,7 @@ const webpackUMDConfig = {
     react: 'React',
     'react-dom': 'ReactDOM',
   },
+  mode: 'production',
   output: {
     filename: '[name].min.js',
     libraryTarget: 'umd',
@@ -28,18 +28,24 @@ const webpackUMDConfig = {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production'),
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        unused: true,
-        dead_code: true,
-        warnings: false,
-      },
-      output: { comments: false },
-    }),
   ],
   module: {
-    noParse: webpackConfig.module.noParse,
-    rules: webpackConfig.module.rules,
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+          },
+        },
+      },
+    ],
+  },
+  performance: {
+    maxEntrypointSize: 750000,
+    maxAssetSize: 750000,
   },
 }