未完待续。。。。

准备工作，需要的依赖包

// react react-dom
npm install react

// webpack三剑客
npm i --save-dev webpack webpack-dev-server webpack-cli

// 面向babel编程，别忘记html模板
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin

css loader

npm install --save-dev style-loader css-loader

webpack.config.js配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundlefile.js'
  },
  module: {
    rules: [
      {
         test: /.js$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader'
         }
      },
      {
         test: /.css$/,
         use: [
            'style-loader',
            'css-loader'
         ]
      }
   ]
  },
  plugins: [
    new HtmlWebpackPlugin({
       template: './src/index.html'
    })
  ]
}

.babelrc文件配置

{
  "presets": [
    "@babel/preset-env",
    "@babel/react"
  ]
}

在src文件夹下新建index.js入口文件

在src文件夹下新建html模板文件

新建一个react入口文件
src/js/components

import React from 'react'
const App = () => {
  return(
     

        
Hello React
     
   )
}
export default App;

package.json配置如下，版本不一定要跟我一样
npm run dev/npm run start

  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production --config ./webpack.config.js --progress --color "
  },
  "devDependencies": {
    "@babel/core": "^7.22.6",
    "@babel/plugin-transform-runtime": "^7.22.6",
    "@babel/preset-env": "^7.22.6",
    "@babel/preset-react": "^7.22.5",
    "babel-loader": "^9.1.2",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^5.5.3",
    "raw-loader": "^2.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Eclipse官网下载历史版本进入官网进入下载页面 选择下载包 同一版本，又有不同类型 进入更多版本列表更古老版本选择需要的版本选择系统

进入官网 https://www.eclipse.org/ 进入下载页面 选择下载包 同一版本，又有不同类型 Eclipse IDE for Enterprise Java and Web Developers Eclipse IDE for Java Dev…