教你如何一步一步手动创建react项目

手动创建react项目

• 初始化项目

// yarn
yarn init
// npm
npm init

• 项目的目录结构

- dist
- src
- - App.js
- - index.js
- .babelrc
- webpack.config.js
- package.json

• 下载 webpack 和 webpack-cli

// yarn
yarn add webpack webpack-cli
// npm
npm i webpack webpack-cli --save-dev

• 下载 html-webpack-plugin 和 webpack-manifest-plugin

// yarn
yarn add html-webpack-plugin webpack-manifest-plugin
// npm
npm i html-webpack-plugin webpack-manifest-plugin --save-dev

• 下载 webpack-dev-server

// yarn
yarn add webpack-dev-server
// npm
npm i webpack-dev-server --save-dev

• 配置 webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const WebpackManifestPlugin = require('webpack-manifest-plugin')

module.exports = {
   
    mode: 'development',
    entry: path.join(__dirname, 'src/index.js'),
    output: {
   
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new WebpackManifestPlugin()
    ],
    devServer: {
   
        contentBase: './dist',
        open: true // 默认自动打开网页
    }
}

• 下载 react react-dom react-router-dom

// yarn
yarn add react react-dom react-router-dom
// npm
npm i react react-dom react-router-dom --save