React to build the simplest environment

1. First, you must have a node and npm

2. Go to the demo directory, npm install -y. Create a module description file package.json, -y is the default for all parameters. Npm created using the libraries, frameworks and projects can become a module, and the module description file is package.json.

3. Installation WebPACK and webpack-cli, npm install webpack webpack-cli --save-dev. Managed separately from the beginning webpack4 webpack and webpack-cli, so all you need to install. --save-dev is installed as a dependent on project development.

　　Add the following code in package.json

"scripts": {
  "build": "webpack --mode production"
}

4. Install babel related, npm install babel-loader @ babel / core @ babel / preset-env @ babel / preset-react --save-dev. babel-loader is webpack loader, babel may es6 transcoding browser code can be appreciated.

5. Configure babel, create .babelrc file in the root directory, add the following code for

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

6. Create webpack profile webpack.config.js, add the following code to mean that the extension is .js file, load the code webpack will come through babel-loader, will be converted to es5 es6

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

7.安装react和react-dom，npm install react react-dom --save-dev。

8. Add the src index.js file folder, add the following code

import React from 'react'

import ReactDOM from 'react-dom'

class Welcome extends React.Component {

　　render() {

　　　　return <h1>Hello, {this.props.name}</h1>;

　　}

ReactDOM.render(<Welcome name="world."></Welcome>, document.getElementById("root"))

9. A run command generate npm run build bundle, bundle will be placed ./dist/main.js. Creating index.html file in the dist, add the following code

<!DOCTYPE html>
<html><head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
    <div id="root"></div>
    <script src="./main.js"></script>
</body>
</html>

10. Open the index.html file in a browser, if all goes well will display hello world. Text.

11. Use webpack plug-in automatically bundle into the script page, run the command npm install html-webpack-plugin html-loader --save-dev. Then configure the update webpack

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

Add index.html file to the src folder

<!DOCTYPE html>
<html><head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
    <div id="root"></div>
</body>
</html>

Then run npm run build will generate synthetic html files and bundle files in the dist folder, open the index.html in your browser to see the effect.

12. Use webpack dev server automatically refresh window, installing a plug npm install webpack-dev-server --save-dev at each modification. Add the following script in package.json

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

13. Now run npm start automatically open the browser display window. Each time you modify the code window will automatically refresh.

Then a simple react development environment is configured, including

Create a node project

Webpack installation package for packaging items

babel installation, for converting the es6 to es5

react installation

html-webpack-plugin installation, for generating a bundle of added template html script tag

webpack-dev-server installation, is used to create a small local server and refresh the window after the code changes

Finally package.json file should look like this

{
  "name": "react_demo_base",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  }
}

Use the project file shown below can run npm install command to quickly create react development environment

React to build the simplest environment

Guess you like