by Anggie Bratadinata

Seting Minimal Webpack & React

Bikin project React paling gampang memang pake create-react-app. Tapi itu lebih cocok untuk belajar ( dokumentasinya juga bilang begitu ). Untuk project beneran, kita bisa pake tool lain yang lebih fleksibel & bisa dikustom atau bikin sendiri dari nol pake bundler semacem Webpack, Parcel atau Rollup.

Untuk bikin project minimalis pake Webpack cukup gampang. Pertama ya bikin direktori, terus inisialisasi NPM.

$ mkdir myproject
$ npm init -y

Instal paket NPM

Instal paket-paket Babel.

$ npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
$ npm i @babel/runtime

Terus instal webpack.

$ npm i -D webpack webpack-cli webpack-dev-server babel-loader

Lanjut instal paket untuk compile CSS & SCSS ( bisa diganti LESS atau CSS-preprocessor yg lain kalo mau).

$ npm i -D node-sass sass-loader style-loader css-loader

Terakhir, instal React.

$ npm i react react-dom

Konfigurasi Webpack

Bikin dulu konfigurasi untuk webpack.

module.exports = (env = {}) => {
  return {
    entry: './src/index.jsx',
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        }
      ]
    },
    devtool: env.dev ? 'eval-source-map' : '',
    resolve: {
      extensions: ['*', '.js', '.jsx']
    },
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: './dist'
    }
  };
};

Tulis Kodenya

Sekarang coba tulis kode sederhana untuk mastiin setingan proyeknya udah bener.

Pertama bikin direktori src/ & dist/. Di direktori dist/ bikin file index.html yang isinya begini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Minimal React</title>
</head>
<body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
</body>
</html>

Pindah ke direktori src/. Bikin file-file di bawah

// file: src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Title from './Title';

import './styles.scss';

const title = 'React with Webpack and Babel';

ReactDOM.render(
  <div>
    <Title title={title} />
  </div>
  document.getElementById('app')
);

// file: src/Title.jsx
import React from 'react';

export default function({ title }) {
  debugger;
  return <h2>{title}</h2>;
}

// file: src/styles.scss
body {
  background: lightgrey;
  padding: 20px;

  h2 {
    color: red;
  }
}

Terakhir tambahin skrip di package.json.

"scripts": {
  "start": "webpack-dev-server --env.dev"
}

Sekarang coba jalanin,

$ npm start

Kalo setingan udah bener di terminal bisa kita liat lognya, kurang lebih begini

｢wds｣: Project is running at http://localhost:8080/
｢wds｣: webpack output is served from /
｢wds｣: Content not from webpack is served from ./dist

... bla bla bla

[./src/Title.jsx] 148 bytes {main} [built]
[./src/index.jsx] 288 bytes {main} [built]
[./src/styles.scss] 1.18 KiB {main} [built]
    + 35 hidden modules
｢wdm｣: Compiled successfully.

Buka localhost:8080 di browser.

Dah gitu aja. Nanti kalo udah diperlukan tinggal nambahin yang lain-lain, misalnya file-loader, react-redux, dll.

Also in this category ...