markdown Webpack 4 - Traversy

Posted 2021-05-05

### Configuring webpack 4 with React

    npm init -y
    
    npm i react react-dom
    
    npm --save-dev webpack webpack-dev-server webpack-cli
    
### Babel to transpile code from ES6

    npm i --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin
    npm i --save-dev css-loader style-loader
    
#### create the config.webpack.js file where all webpack config will remain

    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports ={
        entry: './src/index.js',
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module :{
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    } 
                },
                { 
                    test: /\.css$/,
                    use: ['style-loader','css-loader']
                },
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            })
        ]
    }

#### create the src folder and  src/index.js 

#### create .babelrc file at the root of the app
#### or include it in the Package.json as below

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

### Package.json should look like below :

        {
      "name": "drum-machine",
      "version": "1.0.0",
      "description": "Freecodecamp - React Drum machine",
      "main": "index.js",
      "babel":{
          "presets":[
              "@babel/preset-env",
              "@babel/preset-react"
          ]
      },
      "scripts": {
        "start": "webpack-dev-server --mode development --open --hot",
        "build": "webpack --mode production"
      },
      "author": "Stephane Candelas",
      "license": "ISC",
      "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
      },
      "devDependencies": {
        "@babel/core": "^7.5.5",
        "@babel/preset-env": "^7.5.5",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.6",
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^4.36.1",
        "webpack-cli": "^3.3.6",
        "webpack-dev-server": "^3.7.2"
      }
    }
    
### Adding babel-plugin-transform-class-properties
    
    npm i --save-dev babel-plugin-transform-class-properties

Adding this package will transform the arrow function in class component to avoid having to bind the this.method.
Once npm packaged installed add .babelrc the following :

    {
    "presets":["@babel/preset-env","@babel/preset-react"],
    "plugins": ["transform-class-properties"]
    }