Wk-notes-02-05-Learn-spring-webpack

Spring (boot)

Spring vs Spring Boot

It takes an opinionated view of the Spring platform which paved the way for a faster and more efficient development eco-system.

Preinstalled additional/predefined frameworks (JUnit, Http Server) and libs for Your web project.

Ref: https://www.baeldung.com/spring-vs-spring-boot, https://www.baeldung.com/spring-boot-migration

Webpack from scratch

Steps

• entry

• output

• module

  • rules (for different files parse)

  • noParse (file not to parse)

  • module-contexts

  • plugins

  rules

  This is really important. It parses the js/css/ts file with loader. For js, use babel-loader and a .babelrc. For css, use css-loader and style-loader to enable the import in a js file.

  css-loader is the npm module that would help webpack to collect CSS from all the css files referenced in your application and put it into a string.

  And then style-loader would take the output string generated by the above css-loader and put it inside the <style> tags in the index.html file.

  Ref: https://medium.com/javascript-in-plain-english/its-time-for-you-to-learn-webpack-45d2b08ae754

  Tips:

  • Hot module reloading is tricky, requiring extra entry.app as["webpack-dev-server/client?${basePath}","webpack/hot/dev-server"]

    npm issue

    • npm installs pkgs into node_modules for EVERY project, which is too big

    • npm support range of versions

    Clean Code for JS

    Naming

    Explicit; Precise; Consistent; Meaningful;

    Function

    • Extract functions for functionality/flagToggle;

    • Less args or object args;

    • DIY

    • Prevent side effect

    • Encapsulate conditionals

    Class

    Comment

    This book is basically a opinioned best practice/code standard for clean code. The concept is a must, the practice can vary by teams.