Manually create react application based on webpack+babel (Babel 7)

Build a React project environment

First, npm init generates the package.json file
At this point, we can install the relevant dependencies of react.

npm install react --save
npm install react-dom --save

After installing react, install webpack

npm install webpack --save-dev
npm install webpack-dev-server --save-dev //Realize hot loading

webpack is the play after installing babel! After the 7 version of babel is updated, the former naming method of babel -- is abandoned and changed to @ babel / -. After trial and error, common dependencies and. babelrc file configuration are listed here for reference.

//Dependencies under devdpendencies
npm install @babel/core --save-dev  //Core part of babel, transforming ES6 into ES5
npm install @babel/plugin-transform-runtime --save-dev  //External references to auxiliary functions and built-in functions automatically fill the code without polluting the global variables.
npm install @babel/preset-env --save-dev  //Provide the mapping of the environment to get the plug-in list and pass it to babel
npm install @babel/preset-react --save-dev  //Parsing JSX
npm install babel-loader --save-dev  //webpack needs to use this loader

//Dependence under dependencies
npm install @babel/polyfill --save  //API to escape es6
npm install @babel/runtime --save  //Dependency of babel transformation runtime plug-in

The above is the installation of babel environment. Let's see the file configuration of. babelrc. Create the. babelrc file in the root directory

//. babelrc file contents
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]
}

Next, create a new webpack.config.js file in the root directory, and add the following content

var webpack = require('webpack');
module.exports = {
  entry: './src/app.js',
  output: {
      path: __dirname + '/build',
      filename: "bundle.js"},module: {
      rules: [
        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
             ]      
      }
}

Basically, the configuration content is OK! Add page content below

Add page content

The basic configuration is available. Now we need to add content to it. First, create the index.html file in the root directory, and then create the src folder in the root directory to put our new components.
I configured. / src/app.js in webpack as the entry file, so I created a new app.js file under src and added our first component.

//Contents of index.html file in the root directory
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

//Contents of app.js file under src

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
render(){
  return <div>hello world</div>
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

Now that we have the content, let's change the script part of package.json to this:

"scripts": {
    "start": "webpack-dev-server --hot --inline --mode development --colors --content-base",
    "build": "webpack --progress --colors --mode production"
}

It's done! Now start your project with npm start! The effect is as follows

Tags: Javascript npm React Webpack JSON

Posted on Wed, 04 Dec 2019 07:39:02 -0800 by DaveTheAve