-
now we have a dist directory. inside of dist we have main.js file, to execute the file in browser we need to add it as a script in a html file. Instead of doing it manually, we'll take the help of html-webpack-plugin.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
webpack-dev-server
Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
current setup doesn't provide us a developer friendly environment, we need to check the index.html file every time we make a change, to resolve this we'll use webpack-dev-server.
-
all the code of this article is available here.
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.
-
The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.
-
The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.
-
The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.
-
Create-react-app is a great tool, it gets the project running in minutes. But it binds our hands with a lot of abstractions, according to the official react docs it is meant to be a tool to get anyone started with a good dev environment. It comes out of the box with a lot of good defaults(many of which we may never need) but it's very difficult to extend or bend according to our needs. So in this series of articles we'll learn how to build our react setup from scratch.
