1. Initialize the project

Create a new project folder and execute the initialization command

mkdir project_name && cd project_name
yarn init
Copy the code

After filling in the basic project information, a package.json file is generated.

2. Configure the react

2.1 Installation Dependencies

yarn add react react-dom react-router-dom
Copy the code

2.2 Adding an HTML Template

Create a new public directory and add index.html to it

<! --public/index.html-->

      
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>react-app</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Copy the code

2.3 Adding an import File

Create a SRC directory and add app. js and index.js files to the directory

// src/App.js
import React from 'react'

const App = (a)= > (
    <div>build a react + typescript + webpack + dva project </div>
)

export default App
Copy the code
// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

3 the configuration webpack

3.1 WebPack installation related dependencies

yarn add webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin -D
Copy the code

3.2 Adding the WebPack configuration

Create a config folder under the root directory to store webPack configuration files and add the following configuration files:

  • webpack.config.base.js— Stores webPack configurations common to production and development environments
  • webpack.config.dev.js— Stores the webPack configuration of the development environment
  • webpack.config.prod.js— Stores the webPack configuration for the production environment
// config/webpack.config.base.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: path.resolve(__dirname, '.. /src/index.js'),
    output: {
        filename: '[name].[hash].js'.// Package the resulting file
        path: path.resolve(__dirname, '.. /dist') // Package to the dist directory
    },
    resolve: {
        extensions: ['.js'.'.jsx']},plugins: [new HtmlWebpackPlugin({
            filename: 'index.html'.// The name of the packaged file
            template: path.resolve(__dirname,'.. /public/index.html'), // Specify a template file
            hash: true.// Add a hash stamp to the end of the reference resource}})];Copy the code
// config/webpack.config.dev.js
const merge = require('webpack-mege')
const baseConfig = require('./webpack.config.base.js')

module.exports = merge(baseConfig, {
    mode:'development'
})
Copy the code
// config/webpack.config.prod.js
const merge = require('webpack-mege')
const baseConfig = require('./webpack.config.base.js')

module.exports = merge(baseConfig, {
    mode:'production'
})
Copy the code

3.3 configure the Babel

  1. Install the Babel dependency
yarn add babel-loader @babel/core @babel/cli @babel/preset-env @babel/preset-react -D
Copy the code
  • The core functions of Babel are contained in the @babel/core module
  • Babel provides the command line tool @babel/cli, mainly provides the command Babel
  • The main purpose of @babel/preset-env is to transcode and load polyfills for features we used and are missing in the target browser. It includes plug-ins that support all the latest JS features (ES2015,ES2016, etc., excluding the Stages) and convert them into ES5 code without any configuration.
  • Core-js and Regenerator-Runtime can simulate a full ES2015+ environment. This means you can use new built-in components like Promise and Map, static methods like Array.from, and instance methods like array.prototype.includes.
  • @babel/preset-env provides a useBuiltIns parameter, and when set to Usage, only polyfills needed by the code will be included. Note that to set this parameter to usage, corejs must also be set.
  1. Create the babel.config.js file
module.exports = {
  presets: [['@babel/env',
      {
        useBuiltIns: 'usage'.corejs: 3}].'@babel/preset-react']};Copy the code
  1. Add module configuration to Webpack
// config/webpack.config.base.js
module.exports = {
  ...
  module: {
      rules: [{test: /\.(js|ts)x? $/.// JSX or TSX files
          exclude: /(node_modules)/./ / node_modules ruled out
          use: {
            loader: 'babel-loader'}}]}}Copy the code

3.4 Configuring the Development Server

yarn add webpack-dev-server -D
Copy the code

In the config/webpack config. Dev. Js development service configuration is added

. module.exports = merge(baseConfig, { ... devServer: {port: 3000.host: 'localhost'.contentBase: path.join(__dirname, '.. /public'),
        watchContentBase: true.publicPath: '/'.compress: true.historyApiFallback: true.hot: true.clientLogLevel: 'error'.open: true.watchOptions: {
          ignored: /node_modules/}}})Copy the code

Add a development environment run command to package.json

"scripts": {
    "dev": "./node_modules/.bin/webpack-dev-server --config ./config/webpack.config.dev.js"
}
Copy the code

To access yarn Dev, run yarn Dev in the browser and open http://localhost:3000

4 configuration TypeScript

4.1 Installation Dependencies

yarn add @types/react @types/react-dom @types/react-router-dom typescript @babel/preset-typescript -D
Copy the code

4.2 to modifybabel.config.js

module.exports = {
  presets: [...'@babel/preset-typescript']};Copy the code

4.3 Creating a Vm in the Root Directorytsconfig.json

{
  "compilerOptions": {
    "target": "ES2016"."module": "commonjs"."jsx": "react"."strict": true."allowSyntheticDefaultImports": true."esModuleInterop": true."inlineSourceMap": true
  },
  "include": [
    "src"]}Copy the code

4.4 to modifyindex.jsandApp.jsFile name extension.tsxAnd modify the related path, run again to view