Front-end engineering -React project construction

preface

How to build a React project from scratch (webPack, Babel, etc.) with the latest versions of WebPack, Babel, etc.

Basic installation

First we install the new directory locally, initialize the project, and install the WebPack.

The new directory

mkdir react-app
Copy the code

Go to the directory

cd react-app
Copy the code

Initialize the project using NPM

npm init -y
Copy the code

Install Webpack and WebPack-CLI

npm install webpack webpack-cli --save-dev
Copy the code
  • Webpack doesn’t need to explain
  • Webpack-cli allows us to run Webpack-related directives from the command line

Manage resources and output

First, create an index.html and an index.js file. The structure of the project is as follows

|-- react-app
    |-- index.html
    |-- package-lock.json
    |-- package.json
    |-- src
        |-- index.js
Copy the code

Then create a new configuration file, webpack.config.js

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

Copy the code

As we all know, Webpack only supports js file packaging, so we need to use loader and Plugin to manage other resources.

html

First install the HTML-webpack-plugin to manage the HTML files

npm install html-webpack-plugin --save-dev
Copy the code

Then configure it in webpack.config.js

webpack.config.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports =  { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', }), ], }Copy the code

css

Install style-loader and CSS-loader

npm install --save-dev css-loader style-loader
Copy the code

Configure in webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}
Copy the code
  • css-loaderThe function of CSS is to integrate all CSS
  • style-loaderIs to use integrated CSSstyleThe format of the tag is inserted into the page

Static resource

To load static resources, such as images and fonts, you can use file-loader or url-loader to install fiel-loader

npm install file-loader --save-dev
Copy the code

Configuration webpack. Config. Js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
}
Copy the code
  • url-loadrIs thefile-loaderPackage, useurl-loaderYou can configure to import smaller images directly as base64 strings to reduce the number of requests, which we’ll use directly herefile-loader

Babel

Front-end development is usually done with Babel, which now does more than just convert ES6 code to ES5, but also allows developers to use more user-friendly new JS features.

Install Babel

npm install babel-loader @babel/preset-env @babel/core @babel/preset-react --save-dev
Copy the code
  • @babel/coreThe core package of Babel
  • bable-loaderBabel loader,webpack to use Babel must be installed
  • @babel/preset-env 和 @babel/preset-reactAre two presets of Babel that do the work of converting ES6 to ES5 and recognizing JSX respectively.

Configure Babel, the root directory is set up. Babelrc file, and then write the following configuration

{
 "presets": ["@babel/preset-env", "@babel/preset-react"]
}
Copy the code

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 entry: './src/index.js',
 output: {
   filename: 'bundle.js',
   path: path.resolve(__dirname, 'dist'),
 },
 plugins: [
   new HtmlWebpackPlugin({
     filename: 'index.html',
     template: 'index.html',
   }),
 ],
 module: {
   rules: [
     {
       test: /\.css/,
       use: ['style-loader', 'css-loader'],
     },
     {
       test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
       use: ['file-loader'],
     },
     {
       test: /\.js$/,
       exclude: /node_modules/,
       use: {
         loader: 'babel-loader',
       },
     },
   ],
 },
}
Copy the code

react

The installation of the react

npm install react react-dom --save
Copy the code

Finally, configure webpack to start scripts, which is configured in Page. json

Webpack – dev – server installation

npm install webpack-dev-server --save-dev
Copy the code

Configure the devServer property in webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: './dist',
    open: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
}

Copy the code

Configuring Startup Commands

"scripts": {
    "start": "webpack serve"
}
Copy the code

Start the

Then write a simple React code to launch the project and see what happens

npm run start
Copy the code

conclusion

Now front-end engineering can be said to be the necessary skills of the front-end, long-term business development, product iteration, sometimes ignore the knowledge of architecture, which is also the need for front-end attention. (PS: How TypeScript will be introduced, will be updated in a few days)