2024年Web前端最全浅谈webpack的使用(1)，高级程序员面试题java

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

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

篇幅有限，仅展示部分内容

webpack是什么

---

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

安装

---

webpack 是一个使用 Node.js 实现的一个模块化代码打包工具。所以，我们需要先安装 webpack，安装之前需要搭建好 Node.js 环境

npm install -D webpack webpack-cli

// webpack-cli : 提供 webpack 命令、工具，类似 create-react-app

// webpack : webpack 代码，类似 react

注意点：不推荐全局安装

使用

---

./node_modules/.bin/webpack

// 打包文件时要在这行指令后加上程序主路口

// 查看版本

./node_modules/.bin/webpack -v

也可以编辑 package.json 的 scripts 来简化输入

// package.json

{

…,

“scripts”: {

“自定义的属性名”: “自定义指令”

“hi” : “./node_modules/.bin/webpack” // 调用指令：npm run hi

}

}

小扩展：

1. 鼠标放在start上会出现一个弹框，点击运行脚本可以简化操作

2. scripts 中使用 test、start、restart、stop 命名的时候，可以在调用的时候省略 run，即直接 npm start

3. npx webpack——通过 npx 也可以帮助我们定位命令到 ./node_modules/.bin/ 目录下

注：npm5.2+ 增加，如果没有，可以使用 npm i -g npx 来安装

打包模块

---

打包之前，我们需要了解一个概念，入口文件

入口文件

入口文件就是我们项目中加载的第一个文件，比如上面的 main.js 文件，其它文件都是通过 import 等方式引入的，webpack 会从我们指定的入口文件开始分析所有需要依赖的文件，然后把打包成一个完整文件。

打包命令

./node_modules/.bin/webpack ./js/index.js

上面命令会使用 webpack 默认的一些配置对模块文件进行打包，并把打包后的文件输出到默认创建的 ./dist 目录下，打包后的文件名称默认为 main.js。

模块文件打包以后，就可以在不支持 es6 模块语法的浏览器环境下引入使用了。

打包文件分析

• 把分散的模块文件打包到一个文件中，不需要外部引入了

• 内置了一个小型模块加载器(类似 requireJS)，实现了打包后的代码隔离与引用

以上就是 webpack 最基础的使用于基本原理，当然强大的 webpack 远远不止这些功能。

打包配置

---

虽然，我们可以直接通过命令的来打包，但是推荐创建一个 webpack.config.js 的配置文件来实现更方便和强大的功能。

webpack 命令在运行的时候，默认会读取运行命令所在的目录下的 webpack.config.js 文件，通常我们会在项目的根目录下运行命令和创建配置文件。

我们也可以通过 —config 选项来指定配置文件路径：

webpack --config ./configs/my_webpack.config.js

通常情况下，我们的项目目录大致如下：

/

– /dist - 项目打包后存放目录

– /node_modules - 第三方模块

– /src

------ css/

------ images/

------ js/

------ index.js

– webpack.config.js

– package.json

配置文件

module.exports = {

… //配置项

}

核心配置

---

mode

模式 : "production" | "development" | "none"

module.exports = {

mode: ‘production’ // 压缩–默认选项

mode: ‘development’ // 不压缩

mode: ‘none’ // 空

}

entry

指定打包⼊口⽂文件，有三种不同的形式：string | array | object

1. 一入口一打包

module.exports = {

…

entry:‘./src/a.js’

}

2. 多入口一打包

module.exports = {

mode:‘production’,

entry:[

‘./src/index.js’,

‘./src/list.js’

]

}

3. 多入口多打包

module.exports = {

…

entry:{

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

‘list’:“./src/list.js”

}

}

output

打包后的文件位置

const path = require(“path”)

module.exports = {

…

// 打包后文件位置

output: {

// path路径————必须是绝对路径

path: path.resolve(__dirname, “GD”),

// filename: “bundle.js”, // 一个文件

filename: “name.js” // 多个文件用数组

}

}

• 可以指定一个固定的文件名称，如果是多入口多出口(entry 为对象)，则不能使用单文件出口，需要使用下面的方式

• 通过 webpack 内置的变量占位符：[name]

深入

---

在 webpack 中，有一个很重要的特性：模块不仅仅只是 js 的文件，webpack 可以把任意文件数据作为模块进行处理，包括：非 js 文本、css、图片等等

import tt from ‘./tt.txt’

console.log(tt)

console.log(“hello”)

但是 webpack 默认情况下只能处理 js 模块，如果需要处理其它类型的模块，则需要使用它提供的一些其它功能

执行简要流程

entry

loaders

plugins

output

• loaders：webpack 中非常核心的内容之一，前面我们说的非 js 类型的模块处理就靠它了，不同类型的模块的解析就是依赖不同的 loader 来实现的

• plugins：webpack 中另外一个核心的内容，它主要是扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等

Loaders

---

https://webpack.js.org/loaders/

module.exports = {

…

module:{

rules:[

{

test:/.txt$/,

use:‘raw-loader’

}

]

}

}

当 webpack 碰到不识别的模块的时候，webpack 会在配置的 module 中进行该文件解析规则的查找

• rules 就是我们为不同类型的文件定义的解析规则对应的 loader，它是一个数组

• 每一种类型规则通过 test 选项来定义，通过正则进行匹配，通常我们会通过正则的方式来匹配文件后缀类型

• use 针对匹配到文件类型，调用对应的 loader 进行处理

从一个简单的案例来了解 loader

// src/data/tt.txt

我是 txt 的内容

src/index.js

import tt from ‘./data/tt.txt’;

console.log(‘我在index.js内部输出了————’, tt);

默认情况下，webpack 会报错，因为 webpack 处理不了 txt 这样的非 js 的模块，但是我们可以通过专门来处理纯文本内容(不同的 loader 有不同的作用)

raw-loader

在 webpack 中通过 import 方式导入文件内容，loader 并不是 webpack 内置的，所以首先要安装

npm install --save-dev raw-loader

然后在 webpack.config.js 中进行配置

module.exports = {

…,

module: {

rules: [

{

test: /.txt$/,

use: ‘raw-loader’

}

]

}

}

file-loader

把识别出的资源模块，移动到指定的输出⽬目录，并且返回这个资源在输出目录的地址(字符串)

npm install --save-dev file-loader

rules: [

…,

{

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

use: {

loader:‘file-loader’,

options: {

/**

*/

name: ‘path.ext’,

//打包后的存放位置

outputPath: “./images”,

// 设置打包后文件返回的 url

publicPath:‘./dist/image’

},

}

},

]

占位符：https://webpack.js.org/loaders/file-loader#placeholders

url-loader

可以处理理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对⼩体积的图片⽐较合适，⼤图⽚不合适。

npm install --save-dev url-loader

rules: [

…,

{

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

use: {

loader: ‘url-loader’,

options: {

name: ‘path.ext’,

outputPath: “./image”,

publicPath: ‘./dist/image’,

// 小于100字节

limit: 100000

},

}

},

]

css-loader

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

npm install --save-dev css-loader

rules: [

…,

{

test: /.css$/,

use: “css-loader”

},

]

style-loader

把 css-loader 生成的内容，用 style 标签挂载到⻚面的 head 中

npm install --save-dev style-loader

rules: [

…,

{

test: /.css$/,

use: [“style-loader”, {

loader: “css-loader”,

options: {

// 启用/禁用 url() 处理——默认为true

url: false,

}

}]

}

]

同一个任务的 loader 可以同时挂载多个，处理顺序为：从右到左，也就是先通过 css-loader 处理，然后把处理后的 css 字符串交给 style-loader 进行处理

sass-loader

把 sass 语法转换成 css ，依赖 node-sass 模块

npm install --save-dev sass-loader node-sass

Plugins

---

扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等

HtmlWebpackPlugin

在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中

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

// webpack.config.js

const HtmlWebpackPlugin = require(“html-webpack-plugin”);

module.exports = {

…

plugins: [

new HtmlWebpackPlugin({

// title

title: “My App”,

// 文件名

filename: “app.html”,

// 模板路径

template: “./src/html/index.html”

})

]

};

html-webpack-plugin

在 html 模板中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值

更多的配置

• title: ⽤来生成⻚面的 title 元素

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

• template: 模板⽂件路径，⽀持加载器（loader），⽐如 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 很有用

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

式获取配置的值

更多的配置

• title: ⽤来生成⻚面的 title 元素

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

• template: 模板⽂件路径，⽀持加载器（loader），⽐如 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 很有用

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   [外链图片转存中…(img-ExKBtF3L-1715408915416)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】