Web前端最全Webpack搭建React开发环境，2024年最新面试哪些

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

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

  

  

手动配置

npm init

自动配置

npm init -y

安装react模块

安装react(核心模块)

cnpm install react --save

安装react-dom（语法挂载到HTML上 实现动态渲染 ）

cnpm install react-dom --save

安装webpack工具

安装webpack和webpack-cli（Dev 开发环境安装）

cnpm install webpack webpack-cli --save-dev

安装babel相关

安装 babel和react相关加载器（babel-loader @babel/core ：ES6转ES5的转语法 ；@babel/preset-env @babel/preset-react：用于解析js、jsx 语法）

cnpm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D

安装css加载器

cnpm i css-loader style-loader -D

安装HTML插件

cnpm i html-webpack-plugin -D

PS：【依赖安装到 开发环境与生产环境的区别】

• 开发环境，即项目的编码阶段需要的依赖，上线后不需要引用，例如：webpack构建工具、babel加载器等，使用 --save 或 -S 命令安装；

• 生产环境，项目上线后开始正式提供对外服务的阶段仍然需要依赖支持，例如：jQuery库、路由等，使用 --save-dev 或 -D 命令安装；

第二步 创建目录结构

项目的目录结构为：

myapp

​ – public [静态资源文件目录]

​ – src [ 项目源文件目录 ]

​ – dist [ 打包文件目录 ]

​ – webpack.config.js [ webpack配置文件 ]

​ – package.json [ NPM包管理配置文件 ]

​ – node_modules [ 项目中的依赖存放目录 ]

在public目录下，创建index.html，该文件为项目的默认首页

在src目录下，创建index.js，该文件为项目的入口文件

import React from ‘react’

import ReactDOM from ‘react-dom’

ReactDOM.render(

Hello React!

,document.getElementById(‘root’));

在项目的根目录下创建webpack.config.js配置文件，依次完成以下配置：

（1）配置入口（entry）

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

module.exports = {

entry:‘./src/index.js’

}

（2）配置出口（output）

output 属性告诉 webpack 在哪里输出它所创建的 bundle（打包文件），以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在./dist文件夹中。

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.config.js

const path = require(‘path’);

module.exports = {

//entry:path.resolve(‘./src/index.js’) // (相对路径转绝对路径)

entry:path.join(__dirname,‘./dist’) // (直接拼接两个路径）

output: {

//_dirname前面是两个 ,dist是当前文件存在的目录，将来打包到这个地方

path: path.resolve(__dirname, ‘dist’),

//打完包之后叫 main.js 文件，全部压缩到这里面

filename: ‘main.js’

}

}

会创建一个文件夹dist 里面有main.js文件

（3）配置加载器（loader）

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

※ 在更高层面，在 webpack 的配置中 loader 有两个目标：

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

use 属性，表示进行转换时，应该使用哪个 loader。

※ 使用正则表达式匹配文件时，你不要为它添加引号。

/.txt$/{与}^{\prime }/\dot{t}xt$/’ 或 “/.txt$/” 不一样。

前者指示 webpack 匹配任何以 .txt 结尾的文件，

后者指示 webpack 匹配具有绝对路径 ‘.txt’ 的单个文件;

module.exports = {

// …

//在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。

module:{

rules:[

{

test: /.css$/,

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

},

{

test: /.jsx?$/, // jsx/js文件的正则

exclude: /node_modules/, // 排除 node_modules 文件夹

use:{

// loader 是 babel

loader: ‘babel-loader’,

options: {

// babel 转义的配置选项

babelrc: false,

presets: [

// 添加 preset-react

require.resolve(‘@babel/preset-react’),

[require.resolve(‘@babel/preset-env’), {modules: false}]

],

cacheDirectory: true

}

}

}

]

}

}

（4）配置插件（plugin）

const HtmlWebPackPlugin = require(‘html-webpack-plugin’); // 通过 npm 安装 插件导入

module.exports = {

// …

plugins:[

new HtmlWebPackPlugin({

template: ‘public/index.html’, //告诉模版在哪儿

filename: ‘index.html’, //将来打包之后的文件名字

inject: true //将来打包之后 main.js 文件 引入到 index.html 文件里的位置，配不配置都可以

})

]

}

plugins中的inject属性有四个值true | ‘head’ | ‘body’ | false，默认是body，即将脚本插入到body的最底部

执行打包命令

npx webpack --mode development

配置 npm run build 命令执行打包操作：

//在 package.json 文件添加 build 项

{

“scripts”: {

“build”: “webpack --mode production”

}

}

执行打包命令：

npm run build

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素