[DevOps] Update webpack and eslint package version

[lindapaiste]

Updates all webpack and eslint packages and makes config/code changes as required. There is a lot here, but it had to be done all at once because so many packages depend on webpack.

Fixes: #1337
Related: #1260

Webpack

• Update webpack from v4 to v5.
  • Make these changes from the migration guide:
    • "If you are using something like node.fs: 'empty' replace it with resolve.fallback.fs: false."
    • "Using entry: './src/index.js': you can omit it, that's the default."
    • "Using output.path: path.resolve(__dirname, 'dist'): you can omit it, that's the default."
  • Change the way that we access version from package.json because using named exports from JSON modules is no longer supported.
• Replace deprecated package eslint-loader with recommended eslint-webpack-plugin .
• Update copy-webpack-plugin from v5 to v10.
  • Syntax has changed and the existing array now goes inside an object with property patterns.
  • I changed the replaceML5Reference to use endsWith('.html') instead of a regex. There is no reason other than that I like it better!
• Replace outdated package uglifyjs-webpack-plugin with terser-webpack-plugin
  • The terser plugin ships with webpack v5, but we need to use the new TerserPlugin syntax with an include option in order to apply minification to ml5.min.js only.
• Update webpack-dev-server from v3 to v4.
  • Made these changes from the migration guide:
    • "The disableHostCheck option was removed in favor allowedHosts: 'all'"
    • "contentBase/watchContentBase options were moved to static option"
• Remove deprecated extract-text-webpack-plugin.
• Update html-webpack-plugin from v3 to v5.
• Update webpack-cli from v2 to v4.
• Update webpack-merge from v4 to v5.
• Update karma-webpack from v3 to v5.
  • See Karma section for details.

Babel

• Use the useBuiltIns option on preset-env as suggested by @joeyklee
  • I did "usage". Maybe "entry" is safer? But we pretty much have one single entry point so it's probably the same.
• Removed indexEntryWithBabel as it is no longer needed:
  • "When used alongside @babel/preset-env, If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array nor source. Note, @babel/polyfill still needs to be installed."
• Set corejs version option and installed core-js package directly (instead of via @babel/polyfill)
• Removed @babel/polyfill which is deprecated.
  • "As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions)"
• Note: I kept the babel options in package.json. I do not know if there is any difference between having it there or in the webpack file.

Eslint

• Replace deprecated package eslint-loader with eslint-webpack-plugin, as explained above.
• Update packages:
  • eslint v4 to v8
  • eslint-config-airbnb-base v12 to v15
  • eslint-config-prettier: v4 to v8
  • eslint-nibble v5 to v8
  • eslint-plugin-import minor version bump
• These updates change some rules and introduce new errors which were not present before. We may want to enforce some of the new rules, but for now I wanted to keep the scope of this PR limited. I disabled the following rules which created new errors:
  • arrow-body-style
  • import/no-useless-path-segments
  • no-constructor-return
  • no-else-return
  • default-param-last
  • prefer-regex-literals
  • prefer-object-spread
  • lines-between-class-members

Karma

Karma was somewhat of an afterthought here, as we seem to be moving away from it in favor of Jest. However we do use webpack in our Karma setup so the webpack changes broke things.

• Reuse the base webpack config in karma.conf.js instead of copy and pasting.
  • Import the config using const webpackConfig = require("./webpack.common.babel");
    • Use commonjs/mjs syntax (require and module.exports) in the webpack config file.
  • Add in the only changed rule which is optimization: { minimize: false }.

KARMA TESTS DO NOT WORK WITH THIS PR
The tests are not able to access the global ml5 variable and get errors like TypeError: Cannot destructure property 'neuralNetwork' of 'ml5' as it is undefined. I got to this issue and didn't bother fixing it because I am of the opinion that we should move away from using a global ml5 in tests anyways. This has already been changed in #1345.
🤷‍♀️ I merged in PR #1345 but the import syntax does not work with karma. Neither does require.