Search⌘ K
AI Features
Home
Courses
Test-driven Development with React

Webpack Configuration and Server

Explore how to configure Webpack to build example React applications and set up webpack-dev-server for fast local development. Understand how to create entry points, generate HTML pages automatically, and enable hot module reloading for efficient testing and styling workflows.

We'll cover the following...

Adding an Example Page

  • Create an example dir. Since it will contain web app code, it should be based on the same ESLint config as the src dir. However, one adjustment is in order. As it is, the linter will complain any time we return JSX from a function if that function doesn’t declare its arguments as propTypes. This is a bit of a nuisance, so disable the react/prop-types rule within the example dir:

    //.eslintrc.js
module.exports = {
  env: {
    browser: true, 
  },
  rules: {
    "react/prop-types": "off", }
  };

  • Then add an index.js with some placeholder code:

    // example/index.js
import React from 'react';
import ReactDOM from 'react-dom';

const container = 
document.createElement('div');
document.body.appendChild(container);
ReactDOM.render(<h1>Hello, webpack!</h1>, container);

  • Declare that JS file as a second entry point in the project’s webpack config:

Javascript (babel-node)
module.exports = {
  mode: 'development',
  entry: {
    carousel: './src/Carousel.js',
    example: './example/index.js',
  },
  ...
};

  • We need a page to host this app. Rather than writing up the HTML, you can make webpack generate it as part of the build process using html-webpack-plugin:

    $ npm install --save-dev html-webpack-plugin@3.2.0
+ html-webpack-plugin@3.2.0
...