Creating react app start kit without using npm
npm i webpack webpack-cli --save-dev
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties
npm i react react-dom --save-dev
- Include styling module [material-ui] (optional)
npm install @material-ui/core
npm install @material-ui/icons
- install react routering module
npm install react-router-dom
- Create babel.config.json file paste
{
"presets": [
"@babel/preset-react",
"@babel/preset-env"
/* {
"targets": {
"node": "10"
}
} */
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
- Create webpack.config.js file paste
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
// This has effect on the react lib size
NODE_ENV: JSON.stringify("development"),
},
}),
],
};
- Copy paste below code in package.json file under "scripts"
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
/path/to/my-app/src/index.js