Test-driven Development with React/

...

/

Webpack Configuration and Server

Webpack Configuration and Server

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

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:

Press + to interact
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
...
Ask