Quickly create React projects and configure webpack

1. Quickly create React projects

npm install -g create-react-app // Global installation of create-react-app (only install once)create-react-app demo // Create a projectcd demo // Enter the project directory

Note that Create React App requires Node 14 or higher. A higher version of node is required.

The created project directory structure

-Demo // Project name  -node_modules // Store third-party bags  -public
    -
    -
    -
  -src // The page code is written below    -
    -
    -
    -
    - //Project entrance    -
    -
    -
.gitignore

2. Install the required packages

Since it contains react and react-dom, it has been installed by default. We can install the UI framework ant design.

npm i --save antd

Two basic items for installing webpack

npm i webpack webpack-cli --save-dev

Install webpack

npm i -D webpack

Install webpack server webpack-dev-server to make startup more convenient

npm i --save-dev webpack-dev-server

Automatically create html file html-webpack-plugin

npm i --save-dev  html-webpack-plugin

Clear useless file clean-webpack-plugin, delete unnecessary files each time

npm i --save-dev clean-webpack-plugin

Style compilation loader plugin

npm i --save-dev style-loader css-loader  // css related loadernpm i --save-dev node-sass sass-loader  // scss related loadernpm i --save-dev file-loader url-loader // Load other files，For example, pictures，Font

Install babel

npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react  @babel/plugin-proposal-class-properties
npm i --save @babel/polyfill
npm i --save-dev babel-loader

3. Create a file in the root directory, the code is as follows

const path = require('path');
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
 = {
    devtool: 'inline-source-map',
    entry: {
        index: './src/'
    },
    output: {
        filename: '',
        path: (__dirname, 'build')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /\.(png|svg|jpg|gif)$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'img/[name].[hash:7].[ext]'
            }
        }, {
            test: /\.(js|jsx)$/,
            use: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    devServer: {
        // contentBase: './build',
        port: 8081, // Port number        // inline: true,
        hot: true
    },
    plugins: [
        new (),
        new HtmlPlugin({
            template: 'public/'
        })
    ]
}

4. Add file .babelrc in the root directory, the code is as follows

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ],
  "plugins": [
      "@babel/plugin-proposal-class-properties"
  ]
}

5. Modify

"scripts": {
    "start": "webpack-dev-server --open --mode production",
    "watch": "webpack --watch",
    "build": "webpack --mode production",
    "dev": "webpack  --mode development& webpack-dev-server --open  --mode development",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

6. Modify public/file

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>demo</title>
  </head>
  <body>
      <div ></div>
  </body>
</html>

7. Modify src/file

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

(
    <App />,
    ('root')
);

8. Modify src/file

import React, { Component } from 'react';
import './';  // Introduce style filesclass App extends Component {
  constructor(props) {
    super(props);
     = {};
  }
  render() {
    return (
      &lt;div className="main"&gt;
        &lt;div&gt;I'm home page&lt;/div&gt;
      &lt;/div&gt;
    );
  }
}
export default App;

9. Modify src/file

.main {
  background: darkgray;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

10.Execute in the project root directory

npm run dev

This is the end of this article about creating React projects and configuring webpack. For more information about creating React configuring webpack, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!