手动从头搭建react

作者: aaagu1234 | 来源:发表于2022-05-29 08:41 被阅读0次

手动从头搭建react
webpack从0开始手动搭建react + typeScrip
react native 在Windows上环境搭建
01-从零开始搭建React工程
手动搭建 React + Typescript 项目(一)
webpack4+react手动搭建
从0到1基于Webpack的React项目搭建
iOS 搭建 React Native 开发环境
react antd SPA 管理后台搭建
Redis Cluster使用redis自带工具搭建

先安装所有的依赖：没有cnpm 的可以找淘宝镜像
cnpm init -y
cnpm install react@17.0.2 -S
cnpm install react-dom@17.0.2 -S
cnpm install webpack -D
cnpm install webpack-cli -D

cnpm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D
cnpm i html-webpack-plugin -D
cnpm i webpack-dev-server -D
第二部：
创建app/index.js

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<div>react </div>, document.getElementById("root"))

创建public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>手动搭建react</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

创建webpack.config.js

const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './app/index.js',
    mode: 'development',
    devtool: 'cheap-module-source-map',
    resolve: {
        extensions: ['*', '.js', '.jsx']  
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,   
                use: {
                    loader: 'babel-loader',  
                    options: {
                        babelrc: true,
                        presets: ['@babel/preset-react', '@babel/preset-env'],
                        cacheDirectory: true
                    }
                }
            },
        ]
    },
    devServer: {
        host: '127.0.0.1',
        port: 8080 
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'index.html'
        })

    ]
 
}

对比一下package.json ，缺失的直接复制


{
  "name": "myblue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "babel-loader": "^8.2.5",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  }
}

可以运行了。
运行：

npm run serve

打包：

npm run build

上面可以跑起来了。
下面继续 css 处理依赖

cnpm install mini-css-extract-plugin -D
cnpm install css-loader -D

MiniCssExtractPlugin 可以单独打包，但是没有压缩。
webpack.config.js 加入 loader中加入

  {
                test: /\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            }

 plugins: [
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: 'static/css/[name].[contenthash:8].css',
            chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
          }),
          new CssMinimizerPlugin() 

    ]