2024年最全使用webpack搭建react+antd项目，2024年最新百度前端面试流程

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

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

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

当然也可以使用npm install手动单独下载对应依赖,但有些依赖必须指定版本,否则会有冲突。在项目目录下创建如下文件夹

src用于放置react组件,public用于放置静态文件,dist放置编译目标文件,config用于放置配置文件

3.配置webpack

---

在config中创建webpack配置文件,任意命名,我这里命名为webpack.config.js。创建用于控制路径的配置文件,我这里命名为paths.js

‘use strict’;

const path = require(‘path’);

const fs = require(‘fs’);

const appDirectory = fs.realpathSync(process.cwd());

const resolveAppPath = relativePath => path.resolve(appDirectory, relativePath);

module.exports = {

mainJs:resolveAppPath(‘src/main.js’),

html:resolveAppPath(‘public/index.html’),

buildPath:resolveAppPath(‘dist’),

};

paths.js文件用于配置在编译时可能用到的一些路径,并将其转化为绝对路径,这里导入了三个路径

1.mainJs:入口文件,可以理解为我们的静态页面在未编译时所引入的唯一js文件,这也是react官方推荐的模式

2.html:静态页面路径

3.biildPath:编译完成后的文件应该放置的目录

const path = require(‘path’);

const paths = require(‘./paths’);

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

module.exports = {

entry: paths.mainJs,

output: {

filename: ‘bundle-[hash].js’,

path: paths.buildPath

},

module: {

rules: [

{

test: /.(js|jsx)$/,

exclude: /node_modules/,

use: {

loader: “babel-loader”

}

},{

test: /.css$/,

use: [‘style-loader’, ‘css-loader’]

},{

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

use: ‘url-loader’

},

]

},

plugins: [

new HtmlWebpackPlugin({

template: paths.html,

inject: true

})

]

};

entry选项用于指定入口文件,可以理解为我们的静态页面在未编译时所引入的唯一js文件

output选项用于指定编译结果,filename设置编译完成的文件名称,使用[hash]将编译完成的js文件加上哈希码,防止浏览器缓存,path指定js文件放置目录

需要注意的是除了使用babel-loader对js文件的语法进行转换之外,还要用style-loader和css-loader对css文件进行转换,否则在使用antd的样式时会报错,使用HtmlWebpackPlugin在编译时往html文件中插入编译后的js文件

对于babel的配置主要有两种方式,一种是在项目根目录下创建**.babelrc**文件

{

“presets”: [

“es2015”,

“react”

],

“plugins”: [“transform-class-properties”,[“import”, {

“libraryName”: “antd”,

“libraryDirectory”: “es”,

“style”: “css”

}]]

}

加入transform-class-properties插件可以使用属性初始化器语法,不用在构造函数中定义属性,同时配置babel-plugin-import,实现antd的按需引入

4.测试

在src目录下新建page目录,创建index.js文件,编写一个测试组件,这里用antd官方文档上的演示代码

import React from ‘react’;

import { Menu, Icon, Switch } from ‘antd’;

const { SubMenu } = Menu;

class Sider extends React.Component {

state = {

mode: ‘inline’,

theme: ‘light’,

}

changeMode = (value) => {

this.setState({

mode: value ? ‘vertical’ : ‘inline’,

});

}

changeTheme = (value) => {

this.setState({

theme: value ? ‘dark’ : ‘light’,

});

}

render() {

return (

Change Mode

<span className=“ant-divider” style={{ margin: ‘0 1em’ }} />

Change Theme

style={{ width: 256 }}

defaultSelectedKeys={[‘1’]}

defaultOpenKeys={[‘sub1’]}

mode={this.state.mode}

theme={this.state.theme}

<Menu.Item key=“1”>

Navigation One

</Menu.Item>

<Menu.Item key=“2”>

Navigation Two

</Menu.Item>

<SubMenu key=“sub1” title={Navigation Three}>

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

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

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题