This is an extension of the previous article.

Beautify web pack output information

The output information of webpack during development has a lot of information, which may interfere with our view of information. Here is a suggestion to beautify and streamline the output information.

Streamline the following development server output information and modify webpack.dev.js:

// ...webpack configs
stats: {
  colors: true,
  children: false,
  chunks: false,
  chunkModules: false,
  modules: false,
  builtAt: false,
  entrypoints: false,
  assets: false,
  version: false
}

Beautify the packaging output and install dependencies:

$ npm i -D ora chalk

Modify config/build.js:

const ora = require('ora');
const chalk = require('chalk'); // If you want to change the color of the output information, use this, which is not used in this example.
const webpack = require('webpack');
const webpackConfig = require('./webpack.prod');

const spinner = ora('webpack Compile start...\n').start();

webpack(webpackConfig, function (err, stats) {
  if (err) {
    spinner.fail('Compile failed');
    console.log(err);
    return;
  }
  spinner.succeed('Compile end!\n');

  process.stdout.write(stats.toString({
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }) + '\n\n');
});

Running packaging and development commands separately, is the console interface much more refreshing?

Routing configuration

This section provides a practice of react-router.

Installation Dependency:

$ npm i react-router-dom react-router-config @types/react-router-dom @types/react-router-config
$ npm i @loadable/component

New src/router.ts:

import loadable from '@loadable/component'; // Load on demand

export const basename = ''; // If the access path has a secondary directory, you need to configure this value. If the home page address is'http://tianzhen.tech/blog/home', it is configured here as'/blog'

export const routes = [
  {
    path: '/',
    exact: true,
    component: loadable(() => import('@/pages/demo/HelloWorldDemo/HelloWorldDemoPage')), // Components need to be prepared by yourself
    name: 'home', // Custom Properties
    title: 'react-home' // Custom Properties
    // Here you can extend some custom attributes
  },
  {
    path: '/home',
    exact: true,
    component: loadable(() => import('@/pages/demo/HelloWorldDemo/HelloWorldDemoPage')),
    name: 'home',
    title: 'HelloWorld'
  },
  // 404 Not Found
  {
    path: '*',
    exact: true,
    component: loadable(() => import('@/pages/demo/404Page/404Page')),
    name: '404',
    title: '404'
  }
];

Revamp index.tsc to enable routing:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import { routes, basename } from './router';
import '@/App.less';

const App: React.FC = () => {
  return <BrowserRouter basename={basename}>{renderRoutes(routes)}</BrowserRouter>;
};

export default App;

We can also use routing to set headings for each page.

Write a hook first:

import { useEffect } from 'react';

export function useDocTitle(title: string) {
  useEffect(() => {
    const originalTitle = document.title;
    document.title = title;
    return () => {
      document.title = originalTitle;
    };
  });
}

Apply hook s to components that need to modify headings:

import React from 'react';
import { useDocTitle } from '@/utils/hooks/useDocTitle';

import Logo from './react-logo.svg';
import './HelloWorldDemoPage.less';

const HelloWorldDemoPage: React.FC<Routes> = (routes) => {
  const { route } = routes; // Get the incoming routing configuration
  useDocTitle(route.title); // Modify title
  return <div className="App">hello, world</div>;
};

export default HelloWorldDemoPage;