Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Nonsense only say 1: code word is not easy to seek a 👍, collect === learn, quick action! 🙇 🙇 🙇.

It is suitable for some projects with special requirements and flexible configuration of webpack or other aspects. Since many libraries have been upgraded and the previous tutorials are outdated, there will be some compatibility problems, so I will re-arrange and build a suitable React environment again.

“You read from the beginning, as far as you can go, until you don’t know anything, start from the beginning again, and keep reading until you understand everything.”

React Stack: React 3- Hardware: Mac 4- Environment: Node. js V12 + 5- Build: Webpack

The installation mode can be NPM, CNPM, or YARN

You can use the custom CNPM (gzip compression support) command-line tool instead of the default NPM:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
Copy the code

Taobao Mirror address

Initialization package. Json

Create a project folder and go to the project root directory

$ mkdir react && cd react
Copy the code

Open the command line in the root directory of your project and type the following command, of course you can also use the YARN command:

// Skip the query and generate package.json directly
$ npm init -y
// Or generate package.json after configuring basic information as per the query
$ npm init
Copy the code

Install the React

Install react related

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

The React package is installed, but cannot be accessed. You need to install the translation package

Create the SRC folder in the root directory and create the index.js and app.js files

SRC /index.js entry file contents:

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

ReactDOM.render(
  <App />.document.getElementById('root'))Copy the code

SRC/app.js Component file contents:

import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to React App</h1>
      </div>)}}export default App;
Copy the code

Create an HTML file. The path public/index.html must be the same as that in webpack.config.js

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My React Boilerplate</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
Copy the code

To use JSX syntax in a project:

What is JSX syntax: it is the JS syntax that conforms to the XML specification. (The syntax is much more rigorous than HTML)

Enabling JSX syntax requires compilation, which requires installing Babel and Webpack

Install Babel

Babel is a must-have tool chain for front-end engineering today (unless you’re using a pre-ES6 syntax), primarily for converting ECMAScript 2015+ code into backwardly compatible versions of JavaScript code in older browsers or environments. Babel 7 was officially released in August 2018 with a number of usage and content updates that made it almost necessary to reinstall the NPM package and configure the Babel file.

In Babel 7, one of the most important upgrades is to change all packages to scoped packages. This will effectively avoid duplication or name grabbing, and will make naming more distinct from normal community packages. So we changed the original Babel core package babel-core to @babel/core

Babel is js code that the compiler parses into compatible JS code. Since Babel has been upgraded to Babel 7.x and the Babel 6.x used in previous tutorials has been gradually replaced, this update has also been made

The latest version of Babel replaces Babel –, and is preset to @babel/ -stage-x. Babel 7.x is not recommended anymore, so babel-stage-x needs to be uninstalled during development

After the Babel upgrade, we will not use the previous babel-core, but put it in @babel/core, and update the babel-loader to the latest version.

@babel/preset- React Converts JSX to a function

@babel/ PRESET -env is an intelligent preset that allows you to use the latest JavaScript without micromanaging which syntactic conversions (and optional browser multiple padding) are required for the target environment. This makes your life easier and JavaScript packages smaller!

@babel/preset-flow If you use flow, it is recommended that you use this preset. Flow is a static type checker for JavaScript code.

$ npm install core-js @babel/core @babel/preset-env @babel/preset-react @babel/register babel-loader @babel/plugin-transform-runtime --save-dev
Copy the code

$ npm install @babel/polyfill @babel/runtime --save
Copy the code

The Babel configuration file in our project is placed in the.babelrc file.

You want to programmatically create the configuration? You want to compile node_modules? babel.config.js is for you! You have a static configuration that only applies to your simple single package? .babelrc is for you!

If your configuration file is simple, use.babelrc, but if you want more flexible dynamic configuration items, use babel.config.js.

Add a configuration file. Babelrc and do the following:

{
    "presets" : [ 
        "@babel/preset-env" ,
        "@babel/preset-react"]."plugins" : [
        "@babel/plugin-transform-runtime"]}Copy the code

Install webpack

Webpack-command is not recommended because webpack-command is not officially recommended.

// Note: Do not execute this command
$ npm install webpack webpack-cli webpack-command --save-dev
Copy the code

aboutwebpack-command

On February 25, 2018, Webpack 4.0.0 was officially released, which migrates the Webpack command line code to Webpack-CLI.

However, on the day webPack 4.0.0 was officially released, there was a very similar project called WebPack-Command, which was recently announced as a replacement for webPack-CLI:

By the end of June 2018, users will be redirected to Webpack-command when they install WebPack-CLI. When WebPack 5 is officially released, Webpack-CLI will be scrapped.

Things have changed: WebPack-Command The author states that the Webpack project lead does not support the planned migration of Webpack-CLI to Webpack-Command.

For now, webpack-command is no longer recommended for the webpack command.

Note: Webpack-Command is now maintained on this fork and will open Pull Requests and Issues to users who like the CLI. The Webpack-Contrib organization has chosen not to support this module and is no longer actively maintaining it. Note: webpack-command is now being maintained on this fork, and will be open to Pull Requests and Issues for users that prefer this CLI. The webpack-contrib org has chosen to drop support for this module and is no longer actively maintaining it.

So the end result is webpack-CLI

$ npm install webpack webpack-cli --save-dev
Copy the code

Install webpack server webpack-dev-server to make startup easier

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

Automatically create HTML files html-webpack-plugin

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

Configuration webpack

Webpack.config.js configuration file:

const path = require("path")
const htmlWebpackPlugin = require("html-webpack-plugin") // Import a plug-in that automatically generates HTML files in memory

// Create an instance object of the plug-in
const htmlPlugin = new htmlWebpackPlugin({
    template: path.join(__dirname, "./public/index.html"), / / the source file
    filename: "index.html" // The name of the generated home page in memory
})

// Expose a packaged instance object. Since WebPack is built on Node, it supports all Node apis and syntax
// Webpack can only package files with.js suffix by default, such as.vue. PNG cannot be processed actively, so you need to configure a third-party loader

// Irrelevant code is not written
module.exports = {
    mode: 'development'./ / development or production
	// Irrelevant code......
	module: {// Configuration rules for all third-party modules
		rules : [// Third party matching rule
            {
                test : /\.js|jsx$/.// Default.js file. But JSX files are also written
                use : ['babel-loader'].exclude : /node_modules/ // Don't forget to add exclude}},plugins: [
        htmlPlugin
    ]
}
Copy the code

Start the project

Add startup commands in package.json and run NPM run dev to start

{
  "scripts": {
    "dev": "webpack-dev-server --open --mode development"
  },
}

Copy the code

Start the command

$ npm run dev
Copy the code

It appears that the above page is started successfully!

Other configuration

Now you can configure the router, Redux, Sass, AXIos, and other common libraries yourself

Gorgeous end of the division line

Finished reading the article, but there is still one thing to do, like, follow + favorites, it is said that the people who finished this thing, good luck!