2024年最新怎么用webpack搭建前端环境？，bilibili面试题

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

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

ES6 module:

import xxx from ‘’

export default {}

5.webpack支持的文件类型

默认只支持JS和json文件的引入

注意：如果在JS中要引入其他文件类型：.css,.png,字体文件或其他做任意文件类型，解析时都需求安装合适的loader来进行解析处理

6.webpack配置文件

默认配置文件名：webpack.config.js

如果想运行其他配置文件

webpack --config webpack.dev.config.js

配置文件是webpack的核心，所有的loader和插件环境，运行环境配置都在配置文件中配置使用

例如：

//引入webpack,主要用于对webpack内置插件调用时使用

const webpack = require(‘webpack’)

//引入path，对路径进行处理

const path = require(‘path’)

//创建一个配置对象

const config = {

//配置入口

entry: ‘./src/main.js’,

//配置出口

output: {

//出口路径

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

//出口文件名

filename:‘bundle.js’

}

}

module.exports = config;

7.配置各种loader(文件解析器)

• 解析css的loader

• 解析图片 file-loader,url-loader

• 解析ES6/7/8/9/10… babel

第一步：npm install --save-dev babel-loader @babel/core @babel/preset-env

第二步：在项目根目录下创建一个.babelrc文件，并写入

{

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

}

第三步：配置loader

module: {

rules: [

{ test: /.js$/, exclude: /node_modules/, loader: “babel-loader” }

]

}

8. 自动清理文件

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

引入

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

使用:

//创建一个配置对象

const config = {

…,

plugins: [

new CleanWebpackPlugin()

]

}

9. 自动注入html

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

//创建一个配置对象

const config = {

…,

plugins: [

//自动清理

new CleanWebpackPlugin(),

//自动注入html

new HtmlWebpackPlugin({

template: ‘./src/index.html’,

filename:‘home.html’

}),

]

}

10.运行环境

webpack-dev-server

配置文件中：

devServer: {

contentBase: path.join(__dirname, “dist”), //监听运行目录

port: 9999, //运行端口号

hot:true //热更新

}

11.webpack核心概念：

• 入口：entry：指向项目执行的主入口

• 出口：output 构建输出的文件路径和文件名

• 加载器：loader 转换webpack不识别的文件（资源）类型

• 插件：plugins 为了扩展webpack的功能，例如：清理文件，自动注入Html

• 模式：mode 切换开发环境(development)还是线上(production)环境

12.与vue集成

vue-loader:解析vue文件

vue-template-compiler

安装：npm install vue-loader vue-template-compiler -D

配置webpack文件： {test:/.vue$/,use:[‘vue-loader’]},

实例化vueLoaderPlugin插件

const { VueLoaderPlugin }=require(‘vue-loader’)

添加插件实例化：

},

plugins: [

new VueLoaderPlugin()

]

13、与less集成

安装：npm install less-loader less -D

配置：

module: {

rules: [

{test:/.less$/,use:[‘style-loader’,‘css-loader’,‘less-loader’]},

]

},

14.与sass集成

安装：npm install sass-loader node-sass -D

配置：

module: {

rules: [

{test:/.(scss|sass)$/,use:[‘style-loader’,‘css-loader’,‘sass-loader’]},

]

},

sass常用语法：https://www.cnblogs.com/chyingp/p/sass-basic.html

15.与vue-router

安装:npm install vue-router -D

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

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