Objective: To manually set up and configure webpack from scratch for a React application, for learning purposes.
Run with npm start
.
- Run
npm-init
. - Add webpack packages:
npm install --save-dev webpack webpack-dev-server
- Add React packages:
npm install --save react react-dom
- Add Babel packages:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/preset-stage-2 babel-loader
- Add basic webpack configuration (on
webpack.config.js
). - Add
babel-loader
rule configuration towebpack.config.js
. - Add basic babel configuration (on
.babelrc
).
- Add
html-webpack-plugin
package:
npm install --save-dev html-webpack-plugin
- Add html template file to
src
folder. - Add plugin configuration to the
webpack.config.js
.