Start React With Webpack

2019-06-16

let's see how to configure Webpack for starting React, and let's make simple React project.

Outline

my company starts a new React project. so I got a chance to configure it from the beginning. in this blog post, I will introduce how to set Webpack for React project.

on Github, you can see full source code that I use in this blog post.

Prepare Project

execute the command below to prepare a project.

mkdir react_start
cd react_start
npm init -y

Installation

execute the command below to install libraries for React project.

npm install --save react react-dom
npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react rimraf

we’ve installed so many libraries. let’s see one by one.

  • react, react-dom: these are React library for the web.
  • webpack: this is Webpack library.
  • webpack-cli: this library is to controll Webpack by command line.
  • html-webpack-plugin: this is Webpack plugin to controll HTML in Webpack
  • webpack-dev-server: this is Webpack test server for developing with Webpack on local PC.
  • babel-loader: this library is to use babel in Webpack.
  • @babel/core: we’ll compile with babel.
  • @babel/preset-env: when we compile with babel, we can set the target for the result of the compile with this library.
  • @babel/preset-react: compile React by babel.
  • rimraf: thie library makes us to remove folder by same command on Mac and Windows both.

package.json Configuration

add the scripts to package.json like below to use Webpack.

{
  "name": "react_start",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "prebuild": "rimraf dist",
    "build": "webpack --progress --mode production"
  },
  "author": "dev.yakuza@gmail.com",
  "dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/preset-env": "7.4.5",
    "@babel/preset-react": "7.0.0",
    "babel-loader": "8.0.6",
    "cross-env": "5.2.0",
    "html-webpack-plugin": "3.2.0",
    "rimraf": "2.6.3",
    "webpack": "4.33.0",
    "webpack-cli": "3.3.4",
    "webpack-dev-server": "3.7.1"
  }
}

let’s see the scripts one by one.

  • webpack-dev-server --mode development,: this script is executed by npm start or npm run start. this script starts Webpack dev server by development mode. always, we need to set the mode(development or production), when we execute Webpack.
  • "prebuild": "rimraf dist",: when we execute npm run build to start build script, this script is executed before starting build script. we can use pre or post for starting a script before or after executing the script. I use this script to delete the folder created by build script.
  • "build": "webpack --progress --mode production": this is executed by npm run build. this start bundling by Webpack with production mode. –progress option is to monitor the build process.

Webpack Configuration

create webpack.config.js file in the root folder for React project.

// react_start/webpack.config.js
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    'js/app': ['./src/App.jsx'],
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
};

let’s see details of Webpack configurations.

const path = require('path');

load(import) path for referring the absolute path.

const HtmlWebpackPlugin = require('html-webpack-plugin');

load(import) the plugin for controlling HTML by Webpack.

entry: {
    'js/app': ['./src/App.jsx'],
},

this configuration is for the entry file of the bundle file. the bundle file will be created named app.js under js folder. this file will be bundled(combined) started from ./src/App.jsx entry file.

output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/',
},

the bundle file will be created in ./dist/ folder. publicPath is set for that other files(like HTML) refer the bundle file by / standard.(ex> <script type="text/javascript" src="/js/app.js"></script>)

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      use: ['babel-loader'],
      exclude: /node_modules/,
    },
  ],
},

we will build React file(jsx and js) by using babel.

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
  }),
],

lastly, create index.html on dist by using ./src/index.html. when the file is created, add the bundle fil(js/app.js) created by Webpack on it.

babel Configuration

create .babelrc and modify it like below to configure babel.

{
  "presets": [
    [
      "@babel/preset-env",
      { "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
    ],
    "@babel/react"
  ]
}

we set targets in babel compile. this configuration makes complied file to support two higer version of the browser(ex: IE 11, 10), and browsers shared over 5% in Korea. you can also use “>= 5%” for the world. also, we’ve set "@babel/react" to compile React.

Create HTML

create ./src/index.html and modify it like below to use HTML for React.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

our React code will be inserted in <div id="app"></div>.

Create React

finally, we make React file. create and modify ./src/App.jsx like below.

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello World!</h1>;
};
ReactDOM.render(<App />, document.getElementById('app'));

Check

execute the command below to check our configuration and React worked well.

npm start

and open the browser and go to http://localhost:8080/. you can see Hello World! on the screen. we can add --open option like "start": "webpack-dev-server --mode development --open", instated of "start": "webpack-dev-server --mode development", in package.json script to open the browser and move http://localhost:8080/ automatically when npm start is executed.

kill the test server process, and execute the command below to build.

npm run build

we can see ./dist/ folder created, and index.html, js/app.js created in there. also when you open index.html file, you can see <script type="text/javascript" src="/js/app.js"></script> is added automatically instead of index.html created by us.

Buy me a coffeeBuy me a coffee
Posts