Webbypack and friends!

@mbondyra is helping me to learn Webpack!

We're creating a React project with Webpack from scratch. Doing one thing at a time and checking the output from Webpack without any boilerplate generators like Create React App.

Amazing!

We're creating a React project with Webpack from scratch. Doing one thing at a time and checking the output from Webpack without any boilerplate generators like Create React App. Amazing!

Description of commits

Initial commit ↗

Just git init and yarn init.

Added gitignore and readme ↗

Just that ☝️

Installed webpack ↗

Added Webpack and webpack-cli
Created index.js entry point
Created greet.js module called from index.js

At this point we can run yarn build and Webbypack will use default its default config to create a bundle in the default output dir.

Running yarn build will produce a file in /dist/main.js which we can then run with node using node dist/main.js.

Added webpack config ↗

Added webpack.config.js making the default config explicit.

Added React, Babel and webpack rules for JSX and ES6 ↗

Added react, react-dom as dependencies.

Added Babel, Babel CLI, and babel-loader to manage plugins. This allows for using new imports.

Changed greeting.js to be a React component and used it in index.js together with ReactDOM.

How does ReactDOM know where to append the app if there's no HTML? 🤔 It doesn't! At this point in time the app will crash.

Added HTMLWebpackPlugin ↗

Added HTMLWebpack Plugin to help Webpack deal with HTML files. Now it actually has a root node to attach the app with using ReactDOM.

Added dev script with watch↗

Added a dev script with two options:

--watch so that project is re-built on every file save
--mode development to improve bundle file readability

Added two separate configs for dev and prod↗

Added webpack-merge to merge configs.

Then created a base config and two variants: dev and prod. So far the only difference is mode: key.

Added webpack-dev-server↗

Added webpack-dev-server to serve the app on localhost.

Added source map↗

Added source map to get the actual source code in development mode.

Added CSS Loaders↗

Added CSS file with browser styles reset and css loaders to process it.

Added class properties plugin↗

Added class properties plugin to be able to use things like:

class Component extends React.Component {
  state = {
    counter: 0,
  }
}

Then actually used this by changing the app to the basic react counter example.

Hot realoading

Live reloading ==> needs refreshing the page Hot reloading ==> updating the code in the app without updating the state

anabellaspinelli/webbypack-and-friends