如何创建一个React项目（构建工具webpack 与 Vite

2022-04-11 本文已影响0人生命里那束光

一、使用通用构建工具 Vite

Vite 本身就是一个构建工具，开发环境下不打包，生成环境使用 Rollup 进行打包。那么如何利用 Vite 创建一个 React 的项目呢？执行命令npm init vite@latest，根据提示，选择 react 即可。因此，整体上其实与官方的脚手架搭建项目步骤一致，也是分为 2 个步骤。

1. 脚手架下载安装

执行命令npm init vite@latest，根据提示，选择 react :

√ Project name: ... my-project
? Select a framework: » - Use arrow-keys. Return to submit.  
    vanilla
   vue
>  react
   preact
   lit-element
   svelte
? Select a variant: » - Use arrow-keys. Return to submit.
>   react
   react-ts

Scaffolding project in xxxxxxxxxxxxxx

Done. Now run:   
 cd vite-project
 npm install
 npm run dev

2. 项目启动

项目下载完成后，在我们的命令行中是能够看到相关启动命令的提示信息的，根据提示，执行以下命令即可：

 cd vite-project
 npm install
 npm run dev

二、手动搭建 webpack

手动搭建，需要你拥有基本的 webpack 的使用能力，这里就不再细说了，如果需要，可以单独学习webpack相关课程，将这方面的知识补充上来。此处你只要按照我给的方法进行搭建即可。
手动搭建可以分为 6 个步骤。

1. 创建项目目录并安装开发依赖

我们需要在命令行中依次执行以下命令：

同时为了更好的看清楚我们需要安装的全部依赖，我把安装的所有包名字以及对应版本都放在下面了，供你参考。

react@17.0.1
babel-loader@8.2.2
@babel/preset-env@7.13.9
webpack-dev-server@3.11.2
@babel/core@7.13.8
html-webpack-plugin@4.5.2
webpack-cli@3.3.12
@babel/preset-react@7.12.13
react-dom@17.0.1
webpack@4.46.0

2. 配置 package.json

项目创建完成，开发依赖安装成功后，package.json 内容如下：

{
  "name": "webpack-react-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.9",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^4.5.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }
}

3. 配置 webpack.config.js 文件

配置入口 \src\index.html

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  devtool: 'none',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve('dist')
  },
  devServer: {
    port: 3000,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js|jsx$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

4. 添加对应入口代码

<body>
  <div id="root"></div>
</body>

5. 配置入口 \src\index.js

import React from 'react'
import { render } from 'react-dom'

// 自定义组件
function App() {
  return <div>React</div>
}

render(<App />, document.getElementById('root'))

6. 配置启动命令

然后在 package.json 中添加配置选项：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server"
  },

然后在命令行中执行 npm run dev 就可以启动项目了.