Skip to content

v5.0.0 - Webpack 5 Support

Choose a tag to compare

@pnikolov pnikolov released this 27 Oct 08:10
· 693 commits to master since this release

27/10/2020

New Features

  • Configurable browsers versions support. It uses browserslist - just specify the browsers you want to support in the package.json file for browserslist.
  • Configuration per environment
  • Automatic building of all template HTML files placed under src/templates/, no need to manually configure each file anymore.
  • See the full README file for all new features.

Breaking Changes

  • Webpack version update - support for webpack 5
    • New webpack configuration files.
    • Webpack configuration restructure - split to development and production configuration files.
  • Switched to webpack-dev-server instead of browser-sync.
  • Template files moved from src/ to src/templates/.
  • Removed npm run bundle script - no need anymore.
  • JavaScript syntax cheker command changed from lint-js to lint:js.
  • SASS/PostCSS syntax cheker command changed from lint-sass to lint:sass.
    • Configuration file is renamed from .sass-lint.yml to .sasslintrc for consistency.

Updates

  • src/scss/app.scss - grouped all demo page styles in a dedicated file called demo.scss for easer removal upon starting a new project.
  • Added example demo code in src/js/demo.js
  • Updated README.md

Removed Dependencies

  • browser-sync replaced with webpack-dev-server.
  • browser-sync-webpack-plugin no need anymore as webpack-dev-server is used for this purpose.
  • cross-env - not needed in this setup.
  • cssnano - not needed to be provided explicitly, it is now a dev dependency of css-minimizer-webpack-plugin.
  • node-sass - use sass instead.
  • optimize-css-assets-webpack-plugin - missing support for webpack 5, replaced with css-minimizer-webpack-plugin.
  • style-loader - no more support for inlining CSS with <style> tags.

New Dependencies

Packages Major Version Updates

  • css-loader@5.0.0 from 4.x new features can be found on the official release notes.
  • mini-css-extract-plugin@1.2.0 from 0.x new features can be found on the official release notes
  • style-loader@2.0.0 from 1.x new features can be found on the official release notes.
  • terser-webpack-plugin@5.0.1 from 4.x new features can be found on the official release notes.
  • webpack@5.2.0 from 4.x new features can be found on the official release notes.
  • webpack-cli@4.1.0 from 3.x new features can be found on the official release notes

Packages Minor Version Updates

  • @babel/core@7.12.1 change log can be found on the official release notes.
  • @babel/preset-env@7.12.1 change log can be found on the official release notes.
  • ajv@6.12.6 change log can be found on the official release notes.
  • copy-webpack-plugin@6.2.1 change log can be found on the official release notes.
  • eslint@7.12.1 change log can be found on the official release notes.
  • eslint-plugin-react@7.21.4 change log can be found on the official release notes.
  • eslint-plugin-react-hooks change log can be found on the official release notes.
  • eslint-plugin-jsx-a11y@6.4.1 change log can be found on the official release notes
  • file-loader@6.1.1 change log can be found on the official release notes.
  • postcss@8.1.4 change log can be found on the official release notes.
  • postcss-loader@4.0.4 change log can be found on the official release notes.
  • sass@1.27.0 change log can be found on the official release notes
  • sass-loader@10.0.4 change log can be found on the official release notes.
  • url-loader@4.1.1 change log can be found on the official release notes.