Set React Basic Skeleton

index.js (entry point)
npm init -y
install modules
create webpack.config.js
create .babelrc
development live server

3. install modules

7 webpack modules, 3 babel modules, 2 react modules

webpack

npm i webpack webpack-cli style-loader css-loader babel-loader html-webpack-plugin webpack-dev-server

webpack : core & cli
style-loader & css-loader
babel-loader
html-webpack-plugin
webpack-dev-server

babel

npm i @babel/core @babel/preset-react @babel/preset-env

react

npm i react react-dom

4. create webpack.config.js

instruction for webpack about how-to and target files to transpilling, and its final destination folder.

rules: to process js with babel-loader
plugins: set html origin and filename

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: './index.html'
})

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
    },
  plugins: [htmlPlugin]
}

Assumptions

Webpack it will assume the entry point of your project is src/index and will output the result in dist/main.js minified and optimized for production.

5. create .babelrc

instruction for babel presets

@babel/preset-env

targets: define platform

@babel/preset-react

activation

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react"
  ]
}

6. development live server

in package.json

"scripts": {
  "start": "webpack serve --mode development"
}

It will serve in localhost:8080

dantescoding / skeleton