Install webpack and webpack-dev-server (https://webpack.js.org/)
npm i webpack webpack-dev-server -D
Installing babel transpilers:
npm i babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin -D
Some more webpack plugins:
npm i extract-text-webpack-plugin style-loader js-loader html-webpack-plugin -D npm i extract-text-webpack-plugin@next -D
Installing ReactJS:
npm i react react-dom
-
extract-text-webpack-plugin@next plugin extract out the css from js bundle file and make a separate css bundle file.
-
style-loader and css-leader: These are for loading CSS files.
-
js-loader: A js file loader
-
html-webpack-plugin: Moves the index.html file to dist folder with bundle js and css files
If you don't understand the above commands/plugins just install them for the time being.
├── src
├──── index.html
├──── index.js
├── package.json
├── webpack.dev.config.js
├── webpack.prod.config.js
├── .babelrc
└── README.md
The .babelrc contains the code for the presets:
{ "presets": [ "@babel/preset-react", "@babel/preset-env" ] }
Thats it!
Running the movie playlist in development mode-
npm start
Generate production build files:-
npm run build
