2024年最新webpack基础，2024疫情期间八家大厂的前端面试经历和真题整理

文末

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

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

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

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

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

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

这是288页的前端面试题

}, ],

},

mode: ‘production’,

}

• 运行指令：webpack

6. js语法检查

最新的webpack5没有eslint-loader

• 概述:对js基本语法错误/隐患，进行提前检查

• 安装loader(webpack5文档里已经没有这个loader了)

• npm install eslint-loader eslint -D

• 备注：在eslint中文官网查看配置和规则

• 配置loader（rules的一个对象）

module.exports = {

// …

module: {

rules: [

{

test: /.js$/,

exclude: /node_modules/,

loader: “eslint-loader”,

//options: {

// eslint options (if necessary)

//}

}

]

}

// …

};

• 修改package.json(需要删除注释才能生效、参考vue配置不写在options里)

“eslintConfig”:{

“parserOptions”: {

“ecmaVersion”:6,//支持es6

“sourceType”:“module”//使用es6模块化

},

“env”:{//设置环境

“browser”:true,//支持浏览器环境：能够使用window上的全局变量

“node”:true//支持服务器环境:能够使用node上global的全局变量

},

“globals”:{//声明使用的全局变量，这样即使没有定义也不会报错了

"$":"readonly"///$只读变量

},

“rules”:{//eslint检查的规则 0忽略 1警告 2错误

“no-console”:0,//不检查console

“eqeqeq”:2，//用而不用=就报错

“no-alert”:2//不能使用alert

},

“extends”:“eslint:recommended”//使用eslint推荐的默认规则

}

• 运行指令：webpack

7. js语法转换

• 概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容处理

• 安装loader

• npm install babel-loader @babel/core @babel/preset-env -D

{

test: /.m?js$/,

//test: /.js$/,

exclude: /node_modules/,

use: {

loader: ‘babel-loader’,

options: {

presets: [‘@babel/preset-env’]

}

},

}

• 运行指令：webpack

8. js兼容性处理

最新的bable已经删除polyfill

第一种方法：使用经典的polyfill

• 安装包

• npm install @babel/polyfill

• 使用

//入口文件

import ‘@babel/polyfill’;//包含ES6的高级语法的转换，不管用了哪些新语法，全部的新语法都转换了

• 优点：解决babel只能转换部分低级语法问题，（如：let/const/解构赋值。。。），引入polyfill可以转换高级语法（如：Promise）

• 缺点：将所有高级语法都进行了转换，实际上可能只使用了一部分

• 解决：需要按需加载（使用了什么高级语法，就转换什么，而其他的不转换）

第二种方法：借助按需引入core-js按需引入

• 安装包

• npm install core-js

• 配置loader

{

// test: /.m?js$/,

test: /.js$/,

exclude: /node_modules/,

use: {

loader: ‘babel-loader’,

options: {

presets: [

[

‘@babel/preset-env’,

{

useBuiltIns: ‘usage’, //按需引入需要使用polyfill

corejs: {

version: 3//解决warning

},

targets: { //指定兼容性处理哪些浏览器

“chrome”: ‘58’,

“ie”: “9”

}

}

]

],

// cacheDirectory: true,//开启babel缓存

}

},

}

9. 打包样式文件中的图片资源

最新的webpack5没有file-loader、没有url-loader

• 概述：图片文件webpack不能解析，需要借助loader编译解析

• 添加2张图片：一张小于8kb、一张大于8kb

• 通过背景图方式引入图片

• 安装loader

• npm install file-loader url-loader -D

• 补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

• 配置loader

{

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

use: [

{

loader: ‘url-loader’,

options: {

limit:8192,//8kb–>8kb以下的图片会base64处理

outputPath:‘images’,//决定文件本地输出路径

publicPath:‘…/build/images’//决定图片的url路径

name:‘[hash:8].[ext]’//修改文件名称hash值取8位[ext]文件扩展名

},

},

],

},

• 运行指令：webpack

10. 打包html文件

• 概述：html文件webpack不能解析，需要借助插件编译解析

• 注意不要在html中引入任何css和js文件

• 安装插件Plugins

• npm install html-webpack-plugin -D

• 在webpack.config.js中引入插件（插件都要手动引入，而loader会自动加载）

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

• 配置插件Plugins

plugins:[

new HtmlWebpackPlugin({

template:‘./src/index.html’,//以当前文件为模板创建新的HTML（1.结构和原来一样，2.会自动引入打包的资源）

})

]

• 运行指令：webpack

11. 打包html中图片资源

总结

三套“算法宝典”

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

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注