Setup Your React Apps From Scratch Using Webpack

Hai bertemu lagi pada quarter kali ini dengan saya, semoga tulisan saya banyak memberikanmu inspirasi, ya.

Pada kesempatan kali ini saya ingin sedikit berbagi tentang Konfigurasi awal sebuah project React yang di bundling menggunakan Webpack dari mulai proses development hingga menjadi file yang ready untuk production mode.

Sebelumnya saya ingin membahas sedikit apa itu webpack. Webpack adalah sebuah file bundling Javascript application.

Berikut konsep dasar yang harus diketahui dalam mem-bundling aplikasi Javascript:

Entry:

Berkas utama dimana webpack akan mengetahui semua dependensi aplikasi sehingga nantinya dependensi-dependensi tersebut bisa diproses menjadi satu berkas saja atau istilahnya di-bundle.

Ouput:

Berkas keluaran utama dari webpack hasil proses bundle.

Loader:

Berkas HTML, CSS, JavaScript maupun aset Gambar bisa di-import di berkas utama entry sebagai module.

Plugin:

Plugin tambahan terhadap berkas hasil keluaran bundle. 

1. Setting Babel, Transpiler ES6 ke Plain Javascript

React Apps ditulis menggunakan ES6 / ECMAScript6 atau ECMAScript 2015. Namun kebanyakan browser saat ini belum support untuk membaca ES6, jadi harus di compile menggunakan Babel agar dapat berjalan pada browser saat ini. Berikut install babel pada file project kita.

npm install babel-loader babel-core babel-preset-env babel-preset-react --save-dev

dan buat file .babelrc pada root aplikasi kita seperti dibawah ini:

file .babelrc

Kemudian install react dengan mengetik script ini pada terminal:

npm install --save react react-dom

Buat file webpack.config.js seperti dibawah ini.

Ketik script ini pada terminal:

npm install html-webpack-plugin --save-dev

script diatas adalah plugin yang digunakan agar webpack dapat membaca file html.

const HtmlWebPackPlugin = require("html-webpack-plugin");




const htmlWebpackPlugin = new HtmlWebPackPlugin({

  template: "./src/index.html",

  filename: "./index.html"

});


var path = require('path')

module.exports = {

// parent path yang di build

  entry: './src/index.js',


// target lokasi path hasil build

  output: {

    path: path.join(__dirname, "./dist"),

    filename: 'bundle.js',

    publicPath:'/'

  },




// Hot loader development mode Webpack config

  devServer: {

    inline: true,

    historyApiFallback: true,

    contentBase: './src',

    port: 8100,

    hot: true

  },


  module: {

//list loader yang digunakan

    rules: [

      {

        test: /\.(js|jsx)$/,

        exclude: /node_modules/,

        use: {

          loader: "babel-loader",

          query: {

            plugins:[ 'transform-object-rest-spread' ]

          }

        }

      },


      {

        test:/\.(s*)css$/,

        use: [

         {

            loader: "style-loader"

         },


         {

           loader: "css-loader"

         },

         {

           loader: "sass-loader" // compiles Sass to CSS

         }

        ]

      },

      {

        test: /\.(jpg|png|gif|svg|pdf|ico|eot|svg|ttf|woff|woff2)$/,


        use: [

            {

                loader: 'file-loader',

                options: {

                    name: '[path][name]-[hash:8].[ext]'

                },

            },

        ]

    },

    ]

  },


  plugins: [htmlWebpackPlugin]


};

File webpack.config.js merupakan file yang akan dieksekusi webpack terkait dengan module yang akan di bundling pada aplikasi kita.

Kemudian buat file package.json

{


  "name": "test",

  "version": "1.0.0",

  "description": "test react webpack",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

// mode development pada npm 

    "start": "webpack-dev-server --mode development --open --hot",

    // mode production pada npm

"build": "webpack --mode production"

  },

  "author": "alampanji",

  "license": "ISC",

  "dependencies": {

    "antd": "^3.5.3",

    "babel-plugin-transform-object-rest-spread": "^6.26.0",

    "babel-preset-stage-2": "^6.24.1",

    "react": "^16.3.2",

    "react-dom": "^16.3.2",

    "react-router-dom": "^4.2.2"

  },

//dependency yang di install

  "devDependencies": {

    "axios": "^0.18.0",

    "babel-core": "^6.26.3",

    "babel-loader": "^7.1.4",

    "babel-preset-env": "^1.7.0",

    "babel-preset-react": "^6.24.1",

    "css-loader": "^0.28.11",

    "file-loader": "^1.1.11",

    "html-webpack-plugin": "^3.2.0",

    "node-sass": "^4.9.0",

    "sass-loader": "^7.0.1",

    "style-loader": "^0.21.0",

    "webpack": "^4.8.3",

    "webpack-cli": "^2.1.3",

    "webpack-dev-server": "^3.1.4"

  }

}

Config selesai~

Pada saat kita mengetik npm start, npm akan mengeksekusi webpack pada mode development dan membuka browser secara langsung seperti dibawah ini:

dan pada script npm run build, npm akan mengeksekusi webpack pada mode production dan disimpan didalam folder dist

Dan kini aplikasi React anda berhasil berjalan dan di bundling dengan menggunakakan webpack

Reference:

https://webpack.js.org/