In this post I will take care of basic setup of reactjs project using webpack. To do this as a base I will use code from my previous post about how to theme material ui. For package manager I use yarn. There is great writeup about why yarn was created by facebook.
My basic dependencies are
- webpack, webpack-cli - to build frontend application
- copy-webpack-plugin - to copy static assets
- @babel-core, @babel/preset-react and babel-loader - to transpile code
I can get rid of react, react-dom, @babel/preset-react dependencies if I want to use other frontend framework or just use es6.
Some of the options of the package.json script is postinstall script that will launch everytime I add some package. Also it gives me ability to build project using one word.
So in this example my .babelrc file is simple
And finally there is webpack that allows to configure build with some build steps but now it’s simple.
To use babel with webpack I use babel-loader and it’s specified in module -> rules -> use -> loader.
The main file is entry output is in output -> path. __dirname is node global variable pointing to current directory.
To copy data from html directory to build directory I use copy-webpack-plugin that is defined in plugins section.
Finally you can define your export as a library which means it will be available as global variable.
If your file exports any variable or method. For example :
You can access each exported method or variable by typing Demo.methodName to the console.
Finally there is mode.
That can also be ‘production’ to create size optimized build or ‘development’