2024年Web前端最新搞清楚怎样基于 Webpack5 从 0 搭建 React开发环境-超详细(3)，前端算法面试题

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

loader: “babel-loader”,

exclude: /node_modules/,

},

],

},

};

.babelrc

在根目录下添加 .babelrc 文件：

{

“presets”: [“@babel/preset-env”, “@babel/preset-react”]

}

样式

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

script/webpack.config.js

module.exports = {

// …

module: {

rules: [

{

test: /.(css|less)$/,

use: [

{

loader: “style-loader”,

},

{

loader: “css-loader”,

options: {

importLoaders: 1,

},

},

{

loader: “less-loader”,

lessOptions: {

javascriptEnabled: true,

},

},

],

},

],

},

};

图片字体

$ npm install file-loader --save-dev

script/webpack.config.js

module.exports = {

// …

module: {

rules: [

{

test: /.(png|svg|jpg|gif|jpeg)$/,

loader: ‘file-loader’

},

{

test: /.(woff|woff2|eot|ttf|otf)$/,

loader: ‘file-loader’

}

],

},

};

HTML

$ npm install html-webpack-plugin --save-dev

script/webpack.config.js

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {

// …

plugins: {

html: new HtmlWebpackPlugin({

title: ‘tristana’,

template: ‘public/index.html’

}),

}

};

index.html

开发服务

$ npm install webpack-dev-server --save-dev

script/webpack.config.js

const path = require(“path”);

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {

// …

devServer: {

contentBase: path.resolve(__dirname, “dist”),

hot: true,

historyApiFallback: true,

compress: true,

},

};

package.json

{

// …

“scripts”: {

“start”: “webpack serve --mode=development --config script/webpack.config.js”

},

// …

}

清理 dist

$ npm install clean-webpack-plugin --save-dev

script/webpack.config.js

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);

module.exports = {

// …

plugins: {

new CleanWebpackPlugin()

}

};

Tips

由于 webpack 使用的是^5.21.2 版本，在使用该插件时，会提示clean-webpack-plugin: options.output.path not defined. Plugin disabled...，暂时还未解决。

环境变量

$ npm install cross-env --save-dev

package.json

{

// …

“scripts”: {

“start”: “cross-env ENV_LWD=development webpack serve  --mode=development --config script/webpack.config.js”,

“build”: “cross-env ENV_LWD=production webpack --mode=production --config script/webpack.config.js”

},

// …

}

.jsx 文件

---

安装依赖

$ npm install @babel/preset-react react react-dom --save-dev

.babelrc

{

“presets”: [“@babel/preset-env”, “@babel/preset-react”]

}

src/App.jsx

在 src 目录下，新增 App.jsx 文件：

import React, { Component } from “react”;

class App extends Component {

render() {

return (

 Hello, World! 

);

}

}

export default App;

src/index.js

import React from “react”;

import ReactDOM from “react-dom”;

import App from “./App.jsx”;

ReactDOM.render(, document.getElementById(“root”));

React Router

---

安装依赖

$ npm install react-router history --save

src/index.js

import React from “react”;

import ReactDOM from “react-dom”;

import { Router, Route, Link } from “react-router”;

import { createBrowserHistory } from “history”;

import App from “./App.jsx”;

const About = () => {

return <>About</>;

};

ReactDOM.render(

,

document.getElementById(“root”)

);

MobX

---

安装依赖

$ npm install mobx mobx-react babel-preset-mobx --save

.babelrc

{

“presets”: [“@babel/preset-env”, “@babel/preset-react”, “mobx”]

}

src/store.js

在 src 目录下新建 store.js

import { observable, action, makeObservable } from “mobx”;

class Store {

constructor() {

makeObservable(this);

}

@observable

count = 0;

@action(“add”)

add = () => {

this.count = this.count + 1;

};

@action(“reduce”)

reduce = () => {

this.count = this.count - 1;

};

}

export default new Store();

index.js

import { Provider } from “mobx-react”;

import Store from “./store”;

// …

ReactDOM.render(

,

document.getElementById(“root”)

);

src/App.jsx

import React, { Component } from “react”;

import { observer, inject } from “mobx-react”;

@inject(“store”)

@observer

class App extends Component {

render() {

return (

{this.props.store.count}

add

reduce

);

}

}

export default App;

Ant Design

---

安装依赖

$ npm install antd babel-plugin-import --save

.babelrc

{

// …

“plugins”: [

[

“import”,

{

“libraryName”: “antd”,

“libraryDirectory”: “es”,

“style”: true

}

]

]

}

src/App.jsx

// …

import { DatePicker } from “antd”;

import “antd/dist/antd.css”;

@inject(“store”)

@observer

class App extends Component {

render() {

return (

);

}

}

export default App;

TypeScript

---

安装依赖

$ npm install typescript @babel/preset-typescript --save-dev

.babelrc

{

“presets”: [

// …

“@babel/preset-typescript”

]

}

tsconfig.json

在根目录下，新增 tsconfig.json 文件：

{

“compilerOptions”: {

“emitDecoratorMetadata”: true,

“experimentalDecorators”: true,

“target”: “ES5”,

“allowSyntheticDefaultImports”: true,

“strict”: true,

“forceConsistentCasingInFileNames”: true,

“allowJs”: true,

“outDir”: “./dist/”,

“esModuleInterop”: true,

“noImplicitAny”: false,

“sourceMap”: true,

“module”: “esnext”,

“moduleResolution”: “node”,

“isolatedModules”: true,

“importHelpers”: true,

“lib”: [“esnext”, “dom”, “dom.iterable”],

“skipLibCheck”: true,

“jsx”: “react”,

“typeRoots”: [“node”, “node_modules/@types”],

“rootDirs”: [“./src”],

“baseUrl”: “./src”

},

“include”: [“./src/**/*”],

“exclude”: [“node_modules”]

}

src/App.jsx

更换文件后缀 App.jsx -> App.tsx

import React, { Component } from “react”;

import { observer, inject } from “mobx-react”;

import { DatePicker } from “antd”;

import “antd/dist/antd.css”;

@inject(“store”)

@observer

class App extends Component {

props: any;

render() {

return (

{this.props.store.count}

add

reduce

);

}

}

export default App;

代码规范

---

代码校验、代码格式化、Git 提交前校验、Vscode配置、编译校验

ESLint

安装依赖

$ npm install @typescript-eslint/parser eslint eslint-plugin-standard @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-promise  --save-dev

.eslintrc.js

在根目录下，新增 .eslintrc.js 文件：

module.exports = {

extends: [“eslint:recommended”, “plugin:react/recommended”],

env: {

browser: true,

commonjs: true,

es6: true,

},

globals: {

$: true,

process: true,

__dirname: true,

},

parser: “@typescript-eslint/parser”,

parserOptions: {

ecmaFeatures: {

jsx: true,

modules: true,

},

sourceType: “module”,

ecmaVersion: 6,

},

plugins: [“react”, “standard”, “promise”, “@typescript-eslint”],

settings: {

“import/ignore”: [“node_modules”],

react: {

version: “latest”,

},

},

rules: {

quotes: [2, “single”],

“no-console”: 0,

“no-debugger”: 1,

“no-var”: 1,

semi: [“error”, “always”],

“no-irregular-whitespace”: 0,

“no-trailing-spaces”: 1,

“eol-last”: 0,

“no-unused-vars”: [

1,

{

vars: “all”,

args: “after-used”,

},

],

“no-case-declarations”: 0,

“no-underscore-dangle”: 0,

“no-alert”: 2,

“no-lone-blocks”: 0,

“no-class-assign”: 2,

“no-cond-assign”: 2,

“no-const-assign”: 2,

“no-delete-var”: 2,

“no-dupe-keys”: 2,

“use-isnan”: 2,

“no-duplicate-case”: 2,

“no-dupe-args”: 2,

“no-empty”: 2,

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

,

},

parser: “@typescript-eslint/parser”,

parserOptions: {

ecmaFeatures: {

jsx: true,

modules: true,

},

sourceType: “module”,

ecmaVersion: 6,

},

plugins: [“react”, “standard”, “promise”, “@typescript-eslint”],

settings: {

“import/ignore”: [“node_modules”],

react: {

version: “latest”,

},

},

rules: {

quotes: [2, “single”],

“no-console”: 0,

“no-debugger”: 1,

“no-var”: 1,

semi: [“error”, “always”],

“no-irregular-whitespace”: 0,

“no-trailing-spaces”: 1,

“eol-last”: 0,

“no-unused-vars”: [

1,

{

vars: “all”,

args: “after-used”,

},

],

“no-case-declarations”: 0,

“no-underscore-dangle”: 0,

“no-alert”: 2,

“no-lone-blocks”: 0,

“no-class-assign”: 2,

“no-cond-assign”: 2,

“no-const-assign”: 2,

“no-delete-var”: 2,

“no-dupe-keys”: 2,

“use-isnan”: 2,

“no-duplicate-case”: 2,

“no-dupe-args”: 2,

“no-empty”: 2,

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

[外链图片转存中…(img-Ejghg2Vb-1715464260787)]
[外链图片转存中…(img-21jBuXWI-1715464260787)]