2024年最新弄懂webpack，只要看这一片就够了（文末有福利）(3)，2024年最新2024年前端社招面试题精选

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

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

npm i -D webpack

安装指定版本

npm i -D webpack@

安装最新的体验版本 可能包含bug,不不要⽤用于⽣生产环境

npm i -D webpack@beta

安装webpack V4+版本时，需要额外安装webpack-cli

npm i -D webpack-cli

webpack的构建

========================================================================

默认配置

---

​ 首先我们先看一下webpack的默认配置代码，如下：

const path = require(‘path’)

module.exports = {

// 必填，webpack的执行入口

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

output: {

// 合并输出的文件名

filename: ‘main.js’,

// 合并输出的绝对存放地址

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

}

}

​ 其中，我们需要注意的就是

• webpack默认只支持JS模块和JSON模块

• 支持CommonJS Es moudule AMD等模块类型

• webpack4⽀持零配置使⽤，但是可用性很差，一般都需要额外扩展配置

执行构建

---

可以通过这两种方式进行项目构建

方式1：npx方式

npx webpack

方式2：npm script

首先需要在package.json中添加test指令对应的执行脚本

---

“scripts”:{

“test”: “webpack” // 原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接

},

---

然后在执行如下脚本

npm run test

​ 构建成功后会发现⽬录下多出⼀个 dist ⽬录，⾥⾯有个 main.js ，这个⽂件是⼀个可执行的JavaScript文件，里面包含webpackBootstrap启动函数。

SourceMap

---

源代码与打包后的代码的映射关系，通过sourceMap定位到源代码。

在dev模式中，默认开启，关闭的话可以在配置文件⾥ devtool:"none"

// devtool的介绍 https://webpack.js.org/configuration/devtool#devtool

eval: 速度最快,使用eval包裹模块代码,

source-map: 产生.map文件

cheap: 较快，不包含列信息

Module: 第三⽅模块，包含loader的sourcemap(比如jsx to js， babel的sourcemap)

inline: 将.map作为DataURI嵌入，不单独生成.map⽂件

配置推荐:

devtool:“cheap-module-eval-source-map”,// 开发环境配置

// 线上不推荐开启

devtool:“cheap-module-source-map”, // 线上生成配置

WebpackDevServer

---

webpack-dev-server提升开发效率的利器，可以解决重复打包生成dist目录，这是因为devServer把打包后的模块不会放在dist目录下，二是放到内存中，从而提升速度。

安装

npm install webpack-dev-server -D

修改package.json配置

“scripts”: {

“server”: “webpack-dev-server”

},

修改webpack.config.js配置

devServer: {

contentBase: “./dist”,

open: true,

port: 8081

}

启动

npm run server

跨域问题的解决

---

• 设置服务器代理

devServer: {

…

proxy: {

“/api”: {

target: “http://localhost:9092”

}

}

}

• 本地mock server

devServer: {

…

// before()是devServer的钩子函数，除了before之外还有after，本质上只有执行时间顺序的问题

// app是一个本地的node服务，可以是express，也可以是koa，这里是express

before(app, server) {

app.get(‘/api/mock.json’, (req, res) => {

res.json({

hello: ‘world’

})

})

}

}

Hot Module Replacement (HMR:热模块替换)

---

1. 启动hmr

devServer: {

contentBase: “./dist”,

open: true,

hot: true, // 开启HMR

hotOnly: true // 即便HMR不生效，浏览器也不自动刷新，就开启hotOnly

},

2. 配置webpack.config.js

const webpack = require(“webpack”);

// 在插件配置处添加

plugins: [

new CleanWebpackPlugin(),

new webpack.HotModuleReplacementPlugin()

]

• 注意启动HMR后，css抽离会不生效，还有不支持contenthash，chunkhash， 建议使用style-loader将css处理到html中

• 处理js模块HMR需要使用module.hot.accept来观察模块更新，从⽽更新

if (module.hot) {

// path为需要监听变化的js的相对路径

module.hot.accept(path, function() {

// 执行操作，重新渲染修改后的js效果

});

}

webpack的基本概念

==========================================================================

entry

---

指定webpack打包⼊口文件，webpack 执⾏构建的第一步将从Entry开始，可理解成输入，有三种不同的输入方式

// 字符串: 单入口

entry: “./src/index.js”,

// 数组: 单入口，最终将数组文件合并成一个

entry: [“./src/index.js”, “./src/other.js”],

// 对象: 多入口

entry: {

index: “./src/index.js”,

other: “./src/other.js”

}

output

---

打包转换后的⽂件输出到磁盘位置：输出结果，在webpack经过⼀系列处理并得出最终想要的代码后输出结果。

// 默认处理（单入口）

output: {

filename: “bundle.js”,// 输出⽂文件的名称

path: path.resolve(__dirname, “dist”)// 输出⽂文件到磁盘的⽬目录，必须是绝对路路径

},

// 多⼊口的处理

output: {

filename: “[name][chunkhash:8].js”,// 利用占位符，⽂件名称不要重复

path: path.resolve(__dirname, “dist”)// 输出⽂件到磁盘的目录，必须是绝对路径

},

mode

---

mode用来指定当前的构建环境，主要取值有：

• production // 生产环境的开启会有帮助模块压缩，处理副作用等一些功能

• development // 开发环境的开启会有利于热更新的处理，识别哪个模块变化

• none // 5+取消了

设置mode可以自动触发webpack内置的函数，达到优化的效果

none的赋值在5+版本中取消了，包括production时启动的函数中TerserPlugin改成为UglifyJsPlugin

module

---

模块，在webpack里一切皆模块，⼀个模块对应着一个文件。

webpack会从配置的 Entry 开始递归找出所有依赖的模块。当webpack处理到不认识的模块时，需要在webpack中的module 处进⾏配置，当检测到是什么格式的模块，使⽤什么loader来处理。

module:{

rules:[

{

test:/.xxx$/, //指定匹配规则

use:{

loader: ‘xxx-load’//指定使⽤用的loader

}

}

]

}

loader

---

webpack 默认只支持.json 和 .js模块，不支持不认识其他格式的模块，而loader就是用来转换这些不认识模块的模块转换器，可以把模块原内容按照需求转换成新内容。

常⻅的loader

style-loader

css-loader

less-loader

sass-loader

ts-loader // 将Ts转换成js

babel-loader // 转换ES6、7等js新特性语法

file-loader // 处理理图⽚片⼦子图

eslint-loader

…

Plugins

---

plugins 选项用于以各种方式自定义 webpack 构建过程。

也就是说，webpack的打包过程是有生命周期的概念的，每个阶段都有对应的钩子函数，而plugin就可以在webpack运行到某个阶段的时候进行一些操作，类似生命周期钩子函数的扩展插件，最终完成在webpack构建过程中的特定时机注入扩展逻辑来生成自己想要的结果。

Loader详解

======================================================================

上面我们了解到loader是webpack构建过程中的模块转换器，下面我们着重看几个常用的loader

静态资源处理类

---

1. file-loader

file-loader是把打包⼊口中识别出的资源模块，移动到输出目录，并且返回⼀个地址名称，所以file-loader通常用来处理那些只需要从源代码移到打包目录的静态资源，比如：txt、svg、csv、excel以及各种图片、字体文件。

module: {

rules: [

// test 表示需要识别文件的后缀名，即是这样的后缀名的文件需要由该loader处理

test: /.(png|jpe?g|gif)$/,

// use 表示处理上述匹配文件的loader，如果是一个loader，需要用对象表示，如果是多个loader，则需要用数组

use: {

loader: ‘file-loader’,

options: {

// [name]老资源模块的名称 [hash]hash值 [ext]老资源的后缀名

name: ‘[name]_[hash].[ext]’

// 打包后的存放位置

outputPath: ‘images/’

}

}

]

}

2. url-loader

​ url-loader是file-loader的加强版本，它的内部实现也是基于file-loader，所以可以处理file-loader可以处理的资源。

​ 同时url-loader会根据默认的（或者配置的）limit参数，将满足条件的图片转换成base64格式，并打包到js里，从而减小http请求，提高页面加载速度。但是这种操作只针对小体积的图片，不适用大图片。

module: {

rules: [

{

test: /.(png|jpe?g|gif)$/,

use: {

loader: ‘url-loader’,

options: {

name: ‘[name]_[hash].[ext]’,

outputPath: ‘images/’,

// 小于2048Byte（2KB），才转换成base64

limit: 2048

}

}

}

]

}

样式处理类

---

1. css-loader

分析css模块之间的关系，并合成⼀个css

2. style-loader

style-loader可以会把css-loader生成的内容，以style挂载到页面的head部分

3. less-loader

less-loader会把less语法转成css

在多loader转换时，执行顺序为从右到左，从下到上

module: {

rules: [

{

test: /.css$/,

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

},

{

test: /.scss$/,

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

}

]

}

4. postcss-loader

postcss-loader也比较常见，通过用来批量转化css，比如：自动添加前缀以适配不同版本的浏览器，具体的浏览器适配规则可以参见https://caniuse.com/

// webpack.config.js中的配置

module: {

rules: [

{

test: /.css$/,

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

}

]

}

// 此外，需要新建postcss.config.js

module.exports = {

plugins: [

require(‘autoprefixer’)({

// last 2 versions: 最近的两个大版本

// >1%: 全球市场份额大于1%的浏览器

overrideBrowerslist: [‘last 2 versions’, ‘>1%’]

})

]

}

JS脚本处理类

---

babel-loader

在使用babel-loader，我们需要了解几个概念

1. Babel是JavaScript编译器器，能将ES6代码转换成ES5代码，让我们开发过程中放⼼使用JS新特性⽽不用担⼼心兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。

2. babel-loader是webpack与babel的通信桥梁，不做把es6转成es5的⼯作，这部分⼯作需要用到@babel/preset-env来做，@babel/preset-env里包含了es6，7，8转es5的转换规则

• 在使用preset-env时，需要注意的就是按需引入，由配置参数useBuiltIns决定

• useBuiltIns选项是babel7的新功能，这个选项告诉babel如何配置@babel/polyfill。 它有三个参数可以使⽤:

• entry：需要在webpack的⼊口文件里import "@babel/polyfill"⼀次。 babel会根据你的使⽤情况导⼊垫片，没有使⽤的功能不会被导入相应的垫⽚。

• usage：不需要import，全⾃动检测，但是要安装@babel/polyfill。(试验阶段)

• false：如果你import "@babel/polyfill" ，它不会排除掉没有使用的垫⽚，程序体积会庞⼤。(不推荐)

• 请注意: usage的⾏为类似 babel-transform-runtime，不会造成全局污染，因此也不会对类似 Array.prototype.includes() 进行 polyfill。

[

“@babel/preset-env”,

{

targets: { // 需要指定代码运行的浏览器环境

edge: “17”,

firefox: “60”,

chrome: “67”,

safari: “11.1”

},

corejs: 2,// 新版本需要指定核心库版本

useBuiltIns: “usage”// 按需注入

}

]

3. 默认的Babel只⽀持let等⼀些基础的特性转换，Promise等⼀些还有转换过来，这时候需要借助垫片 @babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器中缺失的特性，其原理是语法转换，也就是说在转换后的文件里定义一个promise，并挂载到window对象上。

4. Babel在执⾏编译的过程中，会从项⽬根⽬录下的 .babelrc JSON 文件中读取配置。没有该⽂件会从loader的options地⽅读取配置

//.babelrc

{

presets: [

[

“@babel/preset-env”,

{

targets: { // 需要指定代码运行的浏览器环境

edge: “17”,

firefox: “60”,

chrome: “67”,

safari: “11.1”

},

corejs: 2,// 新版本需要指定核心库版本

useBuiltIns: “usage”// 按需注入

}

]

]

}

//webpack.config.js

{

test: /.js$/,

exclude: /node_modules/,

loader: “babel-loader”

}

这是最后的全部配置

module: {

rules: [

test: /.js$/,

exclude: /node_modules/,

use: {

loader: “babel-loader”,

options: {

presets: [

[

“@babel/preset-env”,

{

targets: { // 需要指定代码运行的浏览器环境

edge: “17”,

firefox: “60”,

chrome: “67”,

safari: “11.1”

},

corejs: 2,// 新版本需要指定核心库版本

useBuiltIns: “usage”// 按需注入

}

]

]

}

}

]

}

Plugin详解

======================================================================

HtmlWebpackPlugin

---

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。

// 配置参数

title: ⽤来⽣成⻚面的 title 元素

filename: 输出的 HTML ⽂件名，默认是 index.html, 也可以直接配置带有子目录。

template: 模板⽂件路路径，⽀持加载器，⽐如 html!./index.html

inject: true | ‘head’ | ‘body’ | false ,注⼊所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元 素的底部，‘head’ 将放置到 head 元素中。

favicon: 添加特定的 favicon 路径到输出的 HTML ⽂文件中。 minify: {} | false , 传递 html-minifier 选项给 minify 输出

hash: true | false, 如果为 true, 将添加⼀个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。

cache: true | false，如果为 true, 这是默认值，仅仅在⽂件修改之后才会发布⽂件。

showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML ⻚面中。

chunks: 允许只添加某些块 (⽐如，仅 unit test 块) chunksSortMode: 允许控制块在添加到⻚面之前的排序方式，支持的值:‘none’ | ‘default’ | {function}-default:‘auto’ excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)

// 使用案例

const path = require(‘path’)

const htmlWebpackPlugin = require(‘html-webpack-plugin’)

module.exports = {

…

plugins: [

new htmlWebpackPlugin(

// 插件参数传递，使用对象

{

title: ‘my App’,

filename: ‘index.html’,

template: ‘./src/index.html’

}

)

]

}

// index.html 中获取插件参数

CleanWebpackPlugin

---

其实 clean-webpack-plugin 很容易知道它的作用，就是来清除文件的。

一般这个插件是配合 webpack -p 这条命令来使用，就是说在为生产环境编译文件的时候，先把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净，再生成新的。

// 使用案例

const cleanWebpackPlugin = require(‘clean-webpack-plugin’)

module.exports = {

…

plugins: [

new cleanWebpackPlugin()

]

}

MiniCssExtractPlugin

---

一般我们的 css 是直接打包进 js⾥面的，我们希望能单独⽣成 css文件。 因为单独⽣成css，css可以和js并行下载，提高⻚面加载效率

借助MiniCssExtractPlugin 完成抽离css

// webpack.config.js

const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);

module: {

rules: [

{

test: /.scss$/,

use: [

// “style-loader”,

// 不再需要style-loader，⽤MiniCssExtractPlugin.loader

MiniCssExtractPlugin.loader,

“css-loader”, // 编译css

“postcss-loader”,

“sass-loader” // 编译scss

]

}

]

},

plugins: [

new MiniCssExtractPlugin({

filename: “css/[name]_[contenthash:6].css”,

chunkFilename: “[id].css”

})

]

性能优化

==================================================================

提升检索速度

---

1. 缩小loader处理范围

优化loader配置

• test include exclude三个配置项来缩小loader的处理范围

• 推荐include

include: path.resolve(__dirname, “./src”),

2. resolve.modules

• resolve.modules⽤于配置webpack去哪些目录下寻找第三⽅模块，默认是[‘node_modules’]

• 寻找第三方模块，默认是在当前项⽬录下的node_modules⾥⾯去找，如果没有找到，就会去上⼀级目录…/node_modules找，再没有会去…/…/node_modules中找，以此类推，和Node.js的模块寻找机制很类似。

• 如果我们的第三方模块都安装在了项目根⽬录下，就可以直接指明这个路径。

module.exports = {

resolve:{

modules: [path.resolve(__dirname, “./node_modules”)]

}

}

3. resolve.alias

resolve.alias配置通过别名来将原导⼊路径映射成⼀个新的导⼊路径

拿react为例，我们引⼊的react库，⼀般存在两套代码

• cjs

• 采⽤用commonJS规范的模块化代码

• umd

• 已经打包好的完整代码，没有采用模块化，可以直接执⾏

默认情况下，webpack会从⼊口文件./node_modules/bin/react/index开始递归解析和处理依赖的⽂件。我们可以直接指定文件，避免这处的耗时。

alias: {

“@”: path.join(__dirname, “./pages”),

react: path.resolve(

__dirname, “./node_modules/react/umd/react.production.min.js”

),

“react-dom”: path.resolve(

__dirname, “./node_modules/react-dom/umd/react-dom.production.min.js”

)

}

4. resolve.extensions

resolve.extensions在导入语句没带文件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存在。

默认值:

extensions:[‘.js’,‘.json’,‘.jsx’,‘.ts’]

• 后缀尝试列表尽量的⼩

• 导⼊语句尽量的带上后缀

5. externals

我们可以将⼀一些JS⽂文件存储在 CDN 上(减少 Webpack 打包出来的 js 体积)，在 index.html 中通过 标签引⼊入，如:

root

我们希望在使用时，仍然可以通过 import 的⽅式去引⽤(如 import $ from ‘jquery’ )，并且希望 webpack 不不会对其进⾏打包，此时就可以配置 externals 。

//webpack.config.js

module.exports = {

//…

externals: {

//jquery通过script引⼊入之后，全局中即有了了 jQuery 变量量

‘jquery’: ‘jQuery’

}

}

6. CDN

CDN通过将资源部署到世界各地，使得⽤户可以就近访问资源，加快访问速度。要接⼊CDN，需要把⽹

⻚的静态资源上传到CDN服务上，在访问这些资源时，使⽤CDN服务提供的URL。

// webpack.config.js

output:{

publicPath: ‘//cdnURL.com’, //指定存放JS⽂文件的CDN地址

}

• 有cdn服务器地址

• 确保静态资源⽂件的上传与否

提升加载速度

---

1. css压缩

• 借助 optimize-css-assets-webpack-plugin

• 借助 cssnano

安装

npm install cssnano -D

npm i optimize-css-assets-webpack-plugin -D

// webpack.config.js

const OptimizeCSSAssetsPlugin = require(“optimize-css-assets-webpack-plugin”);

new OptimizeCSSAssetsPlugin({

cssProcessor: require(“cssnano”), //引⼊cssnano配置压缩选项

cssProcessorOptions: {

discardComments: { removeAll: true }

}

})

2. html压缩

• 借助html-webpack-plugin

new htmlWebpackPlugin({

title: “my app”,

template: “./index.html”,

filename: “index.html”,

minify: {

// 压缩HTML⽂文件

removeComments: true, // 移除HTML中的注释

collapseWhitespace: true, // 删除空⽩符与换行符

minifyCSS: true // 压缩内联css

}

}),

3. 摇树（tree Shaking）

webpack2.x开始支持 tree shaking概念，顾名思义，“摇树”，清除⽆用 css,js(Dead Code)

Dead Code ⼀般具有以下⼏几个特征

• 代码不会被执⾏，不可到达

• 代码执⾏的结果不会被用到

• 代码只会影响死变量(只写不读)

• Js tree shaking只支持ES module的引⼊方式

css tree shaking

npm i glob-all purify-css purifycss-webpack --save-dev

const PurifyCSS = require(‘purifycss-webpack’)

const glob = require(‘glob-all’)

plugins:[

// 清除⽆用 css

new PurifyCSS({

paths: glob.sync([

// 要做 CSS Tree Shaking 的路径⽂件

path.resolve(__dirname, ‘./src/*.html’), // 请注意，我们同样需要对html⽂件进行 tree shaking

path.resolve(__dirname, ‘./src/*.js’)

])

})

]

Js tree shaking

• 只支持import方式引入，不支持commonjs的方式引入

• 只要mode是production就会生效，develpoment的tree shaking是不生效的，因为webpack为了方便你的调试

• 可以查看打包后的代码注释以辨别是否⽣效

• 生产模式不需要配置，默认开启

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

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

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。