2024年前端最新弄懂webpack，只要看这一片就够了（文末有福利），斗鱼前端开发二面被刷

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

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

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

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为了方便你的调试

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

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

// webpack.config.js

optmization: {

usedExports: true // 只要导出的模块被使用了，再做打包

}

副作用

// package.json

“sideEffects”:false //正常对所有模块进⾏行行tree shaking , 仅⽣生产模式有效，需要配合 usedExports 或者 在数组⾥里里⾯面排除不不需要tree shaking的模块

“sideEffects”:[‘*.css’,‘@babel/polyfill’]

4. 代码分割（code Splitting）

单页面应用spa

打包完后，所有页面只生成一个bundle.js

• 代码体积变大，不利于下载

• 没有合理利用浏览器资源

多页面应用mpa

如果多个页面引入了一些公共模块，那么可以把这些公共的模块抽离出来，单独打包。公共代码只需要下载一次就缓存起来，避免重复下载。

配置

其实code Splitting概念 与 webpack并没有直接的关系，只不过webpack中提供了一种更加方便的方法供我们实现代码分割，基于https://webpack.js.org/plugins/split-chunks-plugin/

optimization: {

splitChunks: {

chunks: ‘async’,// 对同步 initial，异步 async，所有的模块有效 all

minSize: 30000,// 最⼩尺寸，当模块大于30kb

maxSize: 0,// 对模块进行二次分割时使⽤用，不推荐使⽤

minChunks: 1,// 打包⽣成的chunk⽂件最少有几个chunk引⽤了这个模块

maxAsyncRequests: 5,// 最⼤异步请求数，默认5

maxInitialRequests: 3,// 最⼤初始化请求书，⼊口文件同步请求，默认3

automaticNameDelimiter: ‘-’,// 打包分割符号

name: true,// 打包后的名称，除了布尔值，还可以接收⼀个函数function

cacheGroups: {// 缓存组

vendors: {

test: /[\/]node_modules[\/]/,

name:“vendor”,// 要缓存的分隔出来的 chunk 名称

priority: -10// 缓存组优先级数字越大，优先级越⾼

},

other:{

chunks: “initial”,// 必须三选⼀: “initial”|“all”|“async”(默认）

test: /react|lodash/,// 正则规则验证，如果符合就提取 chunk,

name:“other”,

minSize: 30000,

minChunks: 1,

},

default: {

minChunks: 2,

priority: -20,

reuseExistingChunk: true// 可设置是否重⽤用该chunk

}

}

}

}

平时使用下面的配置即可

optimization:{

// 帮我们自动做代码分割

splitChunks:{

chunks:“all”,// 默认是⽀持异步，我们使用all

}

}

5. 作⽤域提升（Scope Hoisting）

作用域提升(Scope Hoisting)是指 webpack 通过 ES6 语法的静态分析，分析出模块之间的依赖关系，尽可能地把模块放到同一个函数中。下⾯通过代码示例来理理解:

// hello.js

export default ‘Hello, Webpack’;

// index.js

import str from ‘./hello.js’;

console.log(str);

打包后， hello.js 的内容和 index.js 会分开

通过配置 optimization.concatenateModules=true`:开启 Scope Hoisting

// webpack.config.js

module.exports = {

optimization: {

concatenateModules: true

}

};

我们发现hello.js内容和index.js的内容合并在一起了！所以通过 Scope Hoisting 的功能可以让 Webpack 打包出来的代码文件更小、运行的更快

6. 动态链接库（DllPlugins）

Dll动态链接库 其实就是做缓存

项目中引入了很多第三方库，这些库在很⻓的⼀段时间内，基本不会更新，打包的时候分开打包来提升打包速度，⽽DllPlugin动态链接库插件，其原理就是把⽹⻚依赖的基础模块抽离出来打包到dll文件中， 当需要导入的模块存在于某个dll中时，这个模块不再被打包，⽽是去dll中获取。

• 动态链接库只需要被编译⼀次，项⽬中⽤到的第三方模块，很稳定，例如react,react-dom，只要没有升级的需求

• webpack已经内置了对动态链接库的⽀持

• DllPlugin：⽤于打包出⼀个单独的动态链接库文件

• DllReferencePlugin：用于在主要的配置⽂件中引⼊DllPlugin插件打包好的动态链接库⽂件

新建webpack.dll.config.js⽂文件，打包基础模块

我们在 index.js 中使⽤了第三方库 react 、 react-dom ，接下来，我们先对这两个库先进行打包。

// webpack.dll.config.js

const path = require(“path”);

const { DllPlugin } = require(“webpack”);

module.exports = {

mode: “development”,

entry: {

react: [“react”, “react-dom”] //! node_modules?

},

output: {

path: path.resolve(__dirname, “./dll”),

filename: “[name].dll.js”,

library: “react”

},

plugins: [

new DllPlugin({

// manifest.json⽂文件的输出位置

path: path.join(__dirname, “./dll”, “[name]-manifest.json”),

// 定义打包的公共vendor⽂文件对外暴暴露露的函数名

name: “react”

})

]

}

在package.json中添加

“dev:dll”: “webpack --config ./build/webpack.dll.config.js”,

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

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