Webpack React Redux Starter Versions Save

• Update most of the dependencies to the latest versions. Major version changes are as follows:

  • connected-react-router 4.5.0 -> 6.2.1

  • react-redux 5.0.7 -> 6.0.0

  • reselect 3.0.1 -> 4.0.0

  • css-loader 1.0.0 -> 2.1.0

  • file-loader 2.0.0 -> 3.0.1

  • jsdom 11.11.0 -> 13.1.0

  • sinon 6.3.4 -> 7.2.2

  • lint-staged 7.3.0 -> 8.1.0

  • react-hot-loader 4.3.11 -> 4.6.3 (not major, but API is changed)

• Change related files according to updated packages' API changes

• Change folder structure (add some currently empty folders for future example project)

• Change eslint config

• Change css-loader setup

• Add mocha-webpack package and use it's config instead of plain mocha test setup for unit testing:

  • move JSDOM setup into separate file tools/jsdomSetup.js
  • create separate webpack config for unit testing
  • Add webpack-node-externals package and externals option to webpack test config so webpack don't bundle packages from node_modules and just require them instead that improves test build speed
  • configure tools/testSetup.js script to do the following things:
    • import tools/jsdomSetup.js script
    • import all unit testing related dependencies (like chai, sinon, enzyme, etc.)
    • configure those dependencies (extend chai with sinonChai, etc.)
    • add expect, sinon, shallow, mount, and render variables to global scope, so they can be used in all test files without requiring them
  • configure mocha-webpack to use webpack test config and run tools/testSetup.js script before unit tests execution
  • add chai-as-promised package and extend chai wit it to help testing async code
  • add cheerio package to prevent peer dependency warnings from yarn and npm

• Add and configure nyc and istanbul-instrumenter-loader to set up unit test coverage.

• Add mode option to webpack config (that is required when using webpack 4).
• Instead of explicitly create new instances of some plugins in config use corresponding optimization options that internally call those plugins:
  • NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors
• Install uglifyjs-webpack-plugin as separate package and use it in optimization.minimazer instead of plugins as webpack 4 docs suggest.
• Add optimize-css-assets-webpack-plugin (that uses cssnano internally) to minimize CSS in production mode. Comparing to using css-nano as PostCSS plugin with post-css-loader it minifies the whole bundle(s) instead of separate chunks which could be potentially faster and with a smaller result.
• Use mini-css-extract-plugin instead of extract-text-webpack-plugin. (why?)
• Configure splitChunks optimization option to automatically extract 3rd party modules to separate vendor bundle (in production mode). Get rid of using legacy CommonsChunkPlugin to extract runtime chunk and configure runtimeChunk optimization option instead.
• Remove HashedModuleIdsPlugin from production config.
• Configure webpack stats to be less verbose.
• Configure webpack-bundle-analyzer to not automatically open report page in default browser when project is built.
• Change build script to not start production server automatically when project is built.
• Remove connect-history-api-fallback package and use single: true config option of browser-sync package instead.
• Get rid of linting all JS and CSS on every file-save in development mode cause it's a time consuming process given that project is large enough. Add precommit hook to lint staged files instead. To accomplish it add husky (instead of pre-commit) and lint-staged packages.
• Add redux-devtools-extension package to connect redux store with Chrome Redux DevTools extension.
• Replace react-router-redux with connected-react-router because of former is deprecated.
• Add enzyme-adapter-react-16 package as new version of enzyme requires it.
• Add recompose and reselect packages.
• Remove legacy react-addons-test-utils package.
• Remove unused svg-url-loader package.
• Update all dependencies to the latest versions.
• Add favicon.
• Change config folder structure.
• Get rid of semicolons in project's code and change eslint config accordingly.
• Extract SVG sprite to separate file.
• Update README

Add CSS Modules support. Edit css-loader package description.

Add basic assets pipeline:

• small (less than 10 kB) images , SVGs, audio/video files and custom font files are just inlined into JS bundle as base64 encoded data URIs (with url-loader)
• assets greater than 10kB are copied into dist folder (with file-loader)
• styles during development are inlined into JS bundle (with the help of css-loader and style-loader)
• styles for production build are placed into separated CSS bundle (with extract-text-webpack-plugin)

Add description to README for following packages:

• file-loader
• url-loader
• style-loader
• css-loader
• extract-text-webpack-plugin

Initial working implementation:

• Preconfigured Babel
• Fully functioning development server with logging
• JS code production optimization:
  • minification (UglifyJsPlugin)
  • tree shaking (dead code elimination)
  • React development specific source code removal (DefinePlugin)
• JavaScript code linting with ESLint:
  • configuration based on Airbnb Style Guide (with minimum changes)
  • watch mode (linting on every file save) via eslint-loader
• Initial environment setup for unit testing:
  • preconfigured Mocha and JSDOM
  • Enzyme, Chai, Sinon, sinon-chai, chai-enzyme
  • watch mode (running unit tests on every file save)
• Simple demo React app
• Detailed README
• No styles and assets pipeline at the moment