Implementation steps for building Webpack5-react scaffolding from scratch (with source code)

webpack5
Official Start
Building Guide

Start building
After completing the dependent preparations, start building the project
Write webpack.dev.js development configuration
Start writing webpack.prod.js production configuration
Writing scripts commands
Configure the code quality control process
Unit Testing

webpack5

Recently, I finally had the time and energy to focus on the company's technical infrastructure. So at the beginning, I transformed the company's SaaS system into a micro-frontend model to solve some of the problems left over from history.

Then, thinking that webpack5 has been released for so long, it is time to use it in the production environment. I also want to promote the popularity of micro front-ends, webpack5, and vite in the industry. Friends who haven’t read my previous articles can look for them at the end of the article. There are really a lot of dry goods.

Official Start

What changes have occurred after upgrading to webpack5?

Improving performance through persistent caching
Adopt better persistent cache algorithms and default behaviors
Reduce the bundle size by optimizing Tree Shaking and code generation (removing nodejs polyfill)
Improve the compatibility of the Web platform
Clear the unreasonable state caused by no incompatible changes in order to achieve Webpack4
Try to introduce breaking changes now to prepare for future features, to keep us using Webpack 5 for as long as possible
Added Module Federation

Building Guide

I recommend you to use the scaffolding I made in our company (Shenzhen Mingyuan Cloud Space) to generate a project template for you with one click, so that you will get better improvement when reading this article.

Steps to generate template:

npm i ykj-cli -g 
ykj init webpack5 (select the general project template here)
cd webpack5
yarn 
yarn-dev

Start building

First, create a new folder and use yarn to initialize the project

mkdir webpack5-demo
cd webpack5-demo
yarn init webpack5-demo
...Enter all the way

Download the latest version of webpack webpack-cli:

yarn add webpack@next webpack-cli@next -D

Then install the React react-dom17 version library

yarn add [email protected] [email protected] --save

Then install the library recommended by react official hot update

yarn add react-refresh -D

Install less css style tag postcss and other style processing libraries (mini-css-extract-plugin needs to install @next version)

yarn add less less-loader css-loader style-loader mini-css-extract-plugin@next -D

Install related babel dependencies

yarn add [email protected] @babel/core@next babel-loader@next @babel/preset-env@next -D

What specific configurations does babel require? I suggest you refer to my template

After completing the dependent preparations, start building the project

Create a config folder in the project root directory to place the webpack configuration file
Create four new files in the config folder

paths.js//Storage pathwebpack.base.js //Basic configurationwebpack.dev.js//Development configurationwebpack.prod.js//Production configuration

In the paths file, use variables to record several key directories:

const path = require('path');

module.exports = {
    // Source directory src: path.resolve(__dirname, '../src'),

    // The resource product folder after construction build: path.resolve(__dirname, '../dist'),

    // static resource public: path.resolve(__dirname, '../public'),
};

Write the basic webpack.base.js configuration file and introduce dependencies

//webpack.base.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const paths = require('./paths');

Write the entry and output fields:

 entry: paths.src + 'index.tsx',
 output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].[contenthash].js',
        publicPath: '',
    },

It should be noted here that webpack5 has optimized the contenthash algorithm. Here you can choose between chunkhash and contenthash. Contenthash is recommended.

Write the basic loader configuration:

    module: {
        rules:
            {
                use: 'babel-loader',
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
            },
            {
                use: ['style-loader', 'css-loader', 'less-loader'],
                test: /\.(css|less)$/,
            },
            {
                type: 'asset',
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
            },
        ],
    },

It should be noted here that webpack5 can use built-in asset to process resources such as pictures and font files, without url-loader and file-loader.

Next, since the project needs to configure aliases and omit suffixes, we first configure the resolve field (I am using the TypeScript+React technology stack):

 resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'],
        alias: {
            '@': paths.src,
            '@c': paths.src + '/components',
            '@m': paths.src + '/model',
            '@s': paths.src + '/services',
            '@t': paths.src + '/types',
        },
    },

As for plugins, since it is a basic configuration, only a clean and html plugin is needed.

  plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
        }),
    ],

Create a new file babel.config.js in the project root directory

const { argv } = require('yargs');
const isDev = argv.mode === 'development';
const plugins = [
    [
        'const-enum',
        {
            transform: 'constObject',
        },
    ],
    'lodash',
    '@babel/plugin-transform-runtime',
    //Support import lazy loading '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-transform-async-to-generator',
    'transform-class-properties',
    [
        'import',
        {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true, // or 'css'
        },
        'antd',
    ],
    [
        'import',
        {
            libraryName: 'ykj-ui',
            libraryDirectory: 'lib/components',
            style: true, // or 'css'
        },
        'ykj-ui',
    ],
];
module.exports = (api) => {
    api.cache(true);
    return {
        presets: [
            [
                '@babel/preset-env',
                {
                    corejs: 3.9,
                    useBuiltIns: 'usage',
                },
            ],
            [
                '@babel/preset-react',
                {
                    runtime: 'automatic',
                },
            ],
            '@babel/preset-typescript',
        ],
        plugins: isDev ? [...plugins, 'react-refresh/babel'] : [...plugins],
    };
};

In this way, our basic webpack configuration is ready. Let's sort it out first:

Use babel to process tsx ts and es high-level syntax
Use loader to process less syntax
Use plugins to process HTML and clean up
Use the resolve field to configure aliases and omit file suffixes
Use built-in assets to process static files, such as pictures, etc.

Write webpack.dev.js development configuration

Introducing dependencies

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const { HotModuleReplacementPlugin } = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.base');

First introduce hot update, merge configuration, basic configuration, official react hot update dependency and then write configuration

const devConfig = {
    mode: 'development',
    devServer: {
        port: 3000,
        contentBase: '../dist',
        open: true,
        hot: true,
    },
    target: 'web',
    plugins: [new HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin()],
    devtool: 'eval-cheap-module-source-map',
};

module.exports = merge(common, devConfig);

Note: You need to set target: 'web' to achieve hot update effect.

The best practice for devtool in development mode is: eval-cheap-module-source-map

In this way, our development mode configuration is set up. Just write an index.html in the public folder, and you can start writing react projects as before.

Start writing webpack.prod.js production configuration

Introduce dependencies:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { merge } = require('webpack-merge');
const common = require('./webpack.base');

The production environment needs to extract CSS tags, so special processing is required for less and CSS. One is postcss to handle style compatibility issues, and the other is MiniCssExtractPlugin.loader:

const prodConfig = {
    mode: 'production',
    devtool: 'hidden-source-map',
    module: {
        rules:
            {
                test: /\.(css|less)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
            },
        ],
    },
    optimization:
        splitChunks: {
            chunks: 'all',
            name: false,
        },
    },
    plugins: [new MiniCssExtractPlugin()],
};
module.exports = merge(common, prodConfig);

The configuration for production is also written.

The best practice for production devtools is: hidden-source-map

Writing scripts commands

"build": "webpack --config config/webpack.prod.js --mode production",
"dev": "webpack serve --config config/webpack.dev.js --mode development",

Note: Hot update used to be webpack-dev-server, now it is webpack serve!!!

Configure the code quality control process

Adding dependencies

yarn add lint-staged @commitlint/cli @commitlint/config-conventional -D

Write code and submit test process

 "husky": {
        "hooks": {
            "pre-commit": "lint-staged",
            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }
    },
    "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx,json,css,less,md}": [
            "prettier --write",
            "eslint --fix",
            "git add"
        ]
    },
    "browserslist": [
        "ie >= 10",
        "ff >= 30",
        "chrome >= 34",
        "safari >= 8",
        "opera >= 23"
    ]
}

Add eslint configuration:

//.eslintrc.js
module.exports = {
    root: true,
    parserOptions: {
        ecmaVersion: 7,
        sourceType: 'module',
    },
    parser: '@typescript-eslint/parser',
    plugins: ['typescript', 'react'],
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    rules:
        semi: ['error', 'always'], // This rule enforces consistent semicolons 'no-unused-vars': 'off', // Disallow unused variables 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // Disable debugger in production environment
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', //Disable console in production environment
        'default-case': ['warn', { commentPattern: '^no default$' }], //Requires Default in the Switch statement
        'dot-location': ['warn', 'property'], // Force a line break before or after the doteqeqeq: ['error', 'allow-null'], // Requires the use of === and !==
        'new-parens': 'warn', // Require parentheses when calling a no-argument constructor 'no-caller': 'error', // Disable caller or callee
        'no-const-assign': 'error', //Disallow changing variables declared with const'no-dupe-args': 'error', //Disallow duplicate parameters in function definitions'no-dupe-class-members': 'error', //Disallow duplicate names in class members'no-dupe-keys': 'warn', //Disallow duplicate keys in object literals'no-extend-native': 'warn', //Disallow extending native objects'no-extra-bind': 'warn', //Disallow unnecessary function binding'no-fallthrough': 'error', //Disallow case statement fallthrough'no-func-assign': 'warn', //Disallow reassignment of function declarations'no-implied-eval': 'error', //Disable implicit eval()
        'no-label-var': 'error', //Disable labels with the same name as variables 'no-loop-func': 'error', //Disable functions in loops 'no-mixed-operators': [
            'warn',
            {
                groups: [
                    ['&', '|', '^', '~', '<<', '>>', '>>>'],
                    ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
                    ['&&', '||'],
                    ['in', 'instanceof'],
                ],
                allowSamePrecedence: false,
            },
        ], //Disable mixed use of different operators 'no-multi-str': 'warn', //Disable multi-line strings (use \n when multiple lines are required)
        'no-native-reassign': 'warn', //Disable reallocation of local objects'no-obj-calls': 'warn', //Disable calling global objects as functions'no-redeclare': 'error', //Disable redeclaration of variables'no-script-url': 'warn', //Disable Script URL
        'no-shadow-restricted-names': 'warn', //Keywords cannot be shadowed 'no-sparse-arrays': 'warn', //Disable sparse arrays 'no-this-before-super': 'warn', //Disable the use of this or super before calling super() in the constructor
        'no-undef': 'error', //Disable undeclared variables 'no-unexpected-multiline': 'warn', //Disable confusing multi-line expressions 'no-use-before-define': [
            'warn',
            {
                functions: false,
                classes: false,
                variables: false,
            },
        ], //Disable use before definition'no-with': 'error', //Disable with statementradix: 'error', //Disable generator function without yield in the function'rest-spread-spacing': ['warn', 'never'], //Enforce limit on the space between the spread operator and its expression'react/jsx-no-undef': 'error', //Disable undeclared variables in JSX'react/no-direct-mutation-state': 'error', //Disable direct changes to this.state'react/jsx-uses-react': 'warn', //Prevent React from being mistakenly marked as unused'no-alert': 0, //Disable the use of alert confirm prompt
        'no-duplicate-case': 2, //Case labels in switch cannot be repeated'no-eq-null': 2, //Do not use == or != operators on null'no-inner-declarations': [2, 'functions'], //Do not use declarations (variables or functions) in block statements
        'no-iterator': 2, //Disable the use of the __iterator__ attribute 'no-negated-in-lhs': 2, //The left side of the in operator cannot have!
        'no-octal-escape': 2, // Disable the use of octal escape sequences 'no-plusplus': 0, // Disable the use of ++, --
        'no-self-compare': 2, //Cannot compare itself 'no-undef-init': 2, //Cannot directly assign undefined to a variable when initializing it
        'no-unused-expressions': 2, //Disallow useless expressions 'no-useless-call': 2, //Disallow unnecessary call and apply
        'init-declarations': 0, // must be assigned an initial value when declaring 'prefer-const': 0, // const is preferred
        'use-isnan': 2, //Disable the use of NaN when comparing, only use isNaN()
        'vars-on-top': 2, //var must be placed at the top of the scope},
};

Unit Testing

New commands:

"test": "jest", //Perform test "test-c": "jest --coverage" //Generate test report

Install jest and other dependencies:

yarn add jest-environment-enzyme ts-jest@next enzyme enzyme-adapter-react-17 enzyme-to-json @types/enzyme @types/enzyme-adapter-react-17 @types/enzyme-to-json -D

Create a new folder test

Write the first unit test and introduce dependencies:

import App from '../src/App';
import { mount, shallow } from 'enzyme';
import React from 'react';
import toJson from 'enzyme-to-json'; //Make a snapshot

Then you can happily start writing unit tests.

In this way, a webpack5 scaffolding is built. Some of the built-in things in webpack can save us a lot of configuration and make it look simpler.

This concludes this article about the implementation steps of building a Webpack5-react scaffold from scratch (with source code). For more relevant Webpack5-react scaffolding content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

How to use webpack4.0 to build single/multi-page scaffolds (jquery, react, vue, typescript)
Methods and steps to build React scaffolding from scratch based on webpack4.X
Webpack+react+antd scaffolding optimization method

<<: How to set up Windows Server 2019 (with pictures and text)

>>: Mysql online recovery of undo table space actual combat record