My Cloudology

Webpack is a Javascript package bundler, it is used to take in files such as .jsx (ReactJS) to produce Javascript. Webpack is commonly used because of its flexibility in orchestrating builds, there are a plethora of loaders and plugins available for most projects. For example the babel-loader, is commonly used in ReactJS projects to convert ES6 compatible JavaScript to ES5 JavaScript.

By default ReactJS compiles code into ES6 JavaScript, but most browsers are only using ES5, to enable backward compatibility, ES6 code needs to be transpiled back to ES5 Javascript.
However Webpack itself does not “understand” how to transpile ES6 to ES5 Javascript, but it can use the loaders such as babel-loader to take in specific files (.jsx or ES6 .js) and transforms them into a desired output (ES5 .js). In addition to having many types of loaders for different file types, Webpack also have abilities such as bundling and a light server that support hot loading.

We will demo how to setup a ReactJS project using Webpack. Start by Initializing the project directory by creating a package.json file using the following command:

npm init -y

The file generated should look like the following:

{
   "name": "project-example",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
 }

Installing Webpack

npm i webpack --save-dev
npm i webpack-cli --save-dev
npm i webpack-dev-server --save-dev

Installing babel-loader

npm i @babel/core babel-loader  --save-dev 
npm i @babel/preset-env --save-dev 
npm i @babel/preset-react --save-dev

By default, babel looks for the a .babelrc file in the directory you installed babel. An example of a configuration is shown below:

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

After babel is installed and configured, hook up babel to Webpack. To do this create a Webpack configuration file. Below is an example of a webpack.config.js using babel, css and html loaders:

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/main.html",
      filename: "./main.html"
    })
  ]
};

Installing React

npm i react 
npm i react-dom
npm i prop-types --save-dev

Webpack html loader

To get Webpack to handle HTML (instead of creating and maintaining your own HTML page), install the relevant loaders. For example:

npm i html-webpack-plugin --save-dev
npm i html-loader --save-dev
npm i css-loader style-loader --save-dev 

Below is an example of what the package.json might look like after the demo:

{
  "name": "project-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --mode development",
    "demo": "webpack-dev-server — mode development — open — hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "prop-types": "^15.7.2",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  },
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}