埋点—环境搭建

这里使用webpack搭建下react的开发环境

webpack的配置文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: "./src/index",
    output: {
        path: undefined,
    },

    resolve: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".json", ".css", ".less"],
        alias: {
            "@": path.resolve(__dirname, "./src"),
        },
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.(jsx|ts|tsx)?$/,
                include: path.resolve(__dirname, "../src"),
                loader: "babel-loader",
                options: {
                    cacheDirectory: true,
                    cacheCompression: false
                }
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "../public/index.html")
        })
    ],

    devtool: "cheap-module-source-map",
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
    devServer: {
        host: "localhost",
        port: 3000,
        open: true,
        hot: true,//热更新
    },
    mode: "development",
}

后端接收下数据

const express=require('express')
const  app=express()
app.listen(9090,()=>{
    console.log('正在监听90端口')
})

app.post('/report',(req,res)=>{
    console.log('---------------------接收到客户端传输的数据------------------')
    console.log(req)
    res.send('post返回的数据')
})

我的依赖项

{
  "name": "ljt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./webpackConfig/webpack.dev.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.5",
    "babel-loader": "^9.1.2",
    "babel-preset-react-app": "^10.0.1",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^5.0.0",
    "html-webpack-plugin": "^5.5.1",
    "image-minimizer-webpack-plugin": "^3.8.2",
    "imagemin": "^8.0.1",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "style-loader": "^3.3.2",
    "ts-loader": "^9.4.2",
    "typescript": "^5.0.4",
    "webpack": "^5.82.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

基础的环境即搭建完成了