Webpack Configuration and Server

Learn about webpack configuration and webpack server to see the app we have been making in the browser.

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:

Get hands-on with 1400+ tech skills courses.