Minimal scaffolding for React with Webpack

UPDATE (Jan 15, 2019):
A better article for Webpack v4 is published.

The article explains how to do a minimal scaffolding of React application using Webpack.

  1. Setup Git.
  2. Setup npm.
  3. Install packages.
  4. Setup babel.
  5. Setup Webpack.
  6. Define entry.
  7. Include bundle.
  8. Run application.

Setup Git

Setup a git repo as follows.

git init git remote add origin <remoteurl> 

Setting up a git repo is optional if you are only doing a demo. The next step which creates a project uses the git repo information.

Setup npm

Do npm init and accept the defaults. This will create a package.json file in the project. Package.json has information like the package name, version, author, production dependencies and development dependencies. Production dependencies are required to run the application. Development dependencies are required for building the application and for running lint, tests, etc.

Install packages

The production packages to install are react, react-dom.

npm install --save react react-dom

The development packages to install are babel and webpack. babel-core is the root babel functionality. babel-loader is required for Webpack to perform a build using babel. babel-preset-env is used to transpile ES6 code to ES5 code (normal JavaScript). babel-preset-react is used to compile JSX to normal JavaScript.

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

Setup Babel

Babel is required for writing ES6 code and compiling JSX to JavaScript. Create a .babelrc file. This file is used by Babel to load and configure presets or plugins.

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

Setup Webpack

what-is-webpack

Webpack is a package that builds the UI project. It allows us to write UI code with import statements. All the imported scripts are converted into a bundle file. Webpack expects a configuration file: webpack.config.js. A minimal configuration for React application is shown below.

module.exports = {   
  entry: './index.js'   
  output: {     
    filename: 'bundle.js' 
  },   
  module: {
     rules: [
       {
         test : /\.js/,
         loader : 'babel-loader'
       }     
    ]   
  } 
}

The entry file to the project is index.js. __dirname is a special Node variable that points to the current directory. The output is stored in a bundle.js within the root folder. Babel is loaded as a module to process .js files. Webpack combines all JavaScript code into a single file called bundle.js.

The output of the build process is a bundle.js. It should be part of .gitignore along with node_modules.

node_modules
bundle.js

Define entry

The entry point for our build process is the index.js. It is a simple Hello world component. The component is rendered in a HTML element with id: container. All the imports starting from index.js is processed. All the scripts referenced from index.js is combined into bundle.js.

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

export default class App extends React.Component {   
  render() {     
    return <div>Hello world</div>;   
  } 
} 

ReactDOM.render(<App />, document.getElementById('container'));

Include bundle

Next, we define a HTML document which includes the bundle.

<body>
  <div id="container"></div>
  <script src="bundle.js"></script>
</body>

Run application

Run the application using webpack-dev-server --inline. This serves the application in http://localhost:8080. As a bonus, it watches for changes to the component and re-renders the page.

Also, configure the start task within package.json. This allows to start the project with the familiar npm start command.

Adding styles to the project

Most developers use SASS for writing the stylesheets. SASS files are processed using more loaders. The following loaders should be added to webpack.config.

{
  test: /\.scss$/,
  loaders: ['style-loader', 'css-loader', 'sass-loader']
}

To install these loaders, use the following npm command:

npm install --save-dev  node-sass sass-loader css-loader style-loader

sass-loader processes SASS files. node-sass is a dependency for sass-loader. The css-loader and style-loader is also required for processing CSS files and importing styles. Add a main.scss to the project which imports all other SASS stylesheets. Import the main.scss in the index.js (entry file for webpack).

import './main.scss';

The above code will inject all the styles into the page.

Complete webpack config is available below.

module.exports = {   
  mode: 'development'
  entry: './index.js'   
  output: {     
    filename: 'bundle.js' 
  },   
  module: {
     rules: [
       {
         test : /\.js/,
         loader : 'babel-loader'
       },
       {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },  
    ]   
  } 
}

And devDependencies are here:

"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"

Related Posts

Leave a Reply

Your email address will not be published.