2024年最新Vue全家桶之webpack详解(四)(2)，2024年最新前端面试资料集合

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

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

• 点击 install

• 等待安装完毕

1.3.2、测试

使用管理员方式打开dos窗口，输入 node -v

显示如图样式，则安装成功

1.3.3、更改淘宝镜像

管理员方式打开DOS窗口，输入

npm config set registry https://registry.npm.taobao.org

点击回车就更换成功了，可以通过

npm config get registry

上面命令去查看是否成功，如果返回是

则更换成功

1.3.4、全局安装webpack

• 在DOS命令窗口中输入 npm install webpack@3.6.0 -g 安装webpack(这里指定版本号3.6.0，因为 vue cli2 依赖该版本)

• 其中的 -g 代表是全局安装，全局安装可以在电脑任何一个位置执行webpack指令

• 安装需要3~5分钟，之后出现可以让你输入的命令行就说明安装完成，如下图

• 在DOS命令窗口输入

webpack --version

• 注意是两个横线

如果你看到3.6.0，说明你已经成功安装了webpack3.6.0

2、准备工作

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

首先创建如下文件和文件夹

• dist文件夹： 用于存放之后打包的文件

• src 文件夹： 用于存放我们写的源文件

• main.js 项目的入口文件

• mathUtils.js 定义了一些数学工具函数，可以在其他地方引用，并且使用。

• index.html 浏览器打开展示的首页html

• package.json 通过 npm init 生成的，npm 包管理的文件

2.1、js文件的打包

---

现在的 js 文件中使用了模块化的方式进行开发，他们可以直接使用吗？不可以。

• 因为如果直接在 index.html 引入这两个 js 文件，浏览器并不识别其中的模块化代码。

• 另外，在真实项目当中有许多这样的 js 文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理

我们应该使用webpack工具，对多个 js 文件进行打包

webpack src/main.js dist/bundle.js

2.2、使用打包后的文件

---

打包后会在 dist 文件夹下，生成一个 bundle.js 文件

• 此文件是 webpack 处理了项目直接文件依赖后生成的一个 js 文件，我们只需要将这个 js 文件在 index.html 中引入即可

2.3、示例

---

例如，我们使用模块化开发两个js文件

之后在 main.js 中进行引入两个js文件，在Termial终端使用 webpack 打包main.js

// 将src下的main.js 打包到dist目录下然后命名为bundle.js

webpack src/main.js dist/bundle.js

所以我们就知道了，我们以后在 src 下开发，之后让 webpack 打包main.js，然后我们引用打包后的js文件，这就是我们的开发模式。

3、webpack配置

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

3.0、mode节点的可选值

---

module.exports = {

mode: ‘development’, // mode 用来指定构建模式,可选值有 development 和 production

}

mode 节点的可选值有两个，分别是：

1. development

• 开发环境

• 不会堆打包生成的文件进行代码压缩和性能优化

• 打包速度快，适合在开发阶段使用

2. production

• 生产环境

• 会对打包生成的文件进行代码压缩和性能优化

• 打包速度很慢，仅适合在项目发布阶段使用

3.1、入口和出口

---

每次使用webpack的命令都需要写上入口和出口作为参数，非常麻烦，有没有一种方法可以将者两个参数写到配置中，在运行时，直接读取呢？

• 当然可以，就是创建一个 webpack.config.js 文件

• 通过 entry 节点指定打包的入口

• 通过 output 节点指定打包的出口

const path = require(‘path’)

module.exports = {

// 入口:可以是字符串/数组/对象，我们这里的入口只有一个，所以写一个字符串即可

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

// entry: path.join(__dirname,‘./src/index.js’)

// 出口:通常是一个对象,里面至少包含两个重要属性,path 和 filename

output :{

// 注意: path通常是一个绝对路径

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

// 输出文件目录

filename: ‘bundle.js’

}

}

这样配置之后我们用 webpack 打包时，就可以直接在终端输入 webpack ，就相当于 webpack src/main.js dist/bundle.js ,虽然看起来简洁，但是这不是我们最终的方式，我们最好的方式在下方有记录

webpack.config.js是 webpack 的配置文件。 webpack 在真正开始打包构建之前，会先读取这个配置文件 ， 从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行webpack 的

3.2、局部安装webpack

---

既然已经全局安装了 webpack，为什么还要局部安装呢？这是因为我们需要的项目可能是从网上下载下来的，项目中使用的webpack和我们本地的webpack可能版本不同，这就需要在局部安装webpack了

目前，我们使用的webpack是全局的webpack，如果我们想使用局部来打包呢？

• 因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。

• 所以通常一个项目，都有自己局部的webpack。

第一步，项目中需要安装自己局部的webpack

• 这里我们让局部安装安装 webpack3.6.0

npm install webpack@3.6.0 --save-dev

3.3、package.json中定义启动

---

但是，每次执行都敲这么一长串有没有觉得不方便呢？OK，我们可以在package.json的scripts中定义自己的执行脚本。

• package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。

• 首先，会寻找本地的 node_modules/.bin 路径中对应的命令。

• 如果没有找到，会去全局的环境变量中寻找

在 package.json 文件下有 scripts ，是脚本的意思，我们只需要在下方配置脚本

这样配置完成之后，我们在终端输入 npm run build 也就相当于执行 webpack ，也就相当于执行 webpack src/main.js dist/bundle.js

4、webpack中的loader

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

在实际开发过程中， webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他 非 .js 后缀名结尾的模块 ， webpack 默认处理不了， 需要调用 loader 加载器才可以正常打包 ，否则会报错

loader加载器的作用： 协助 webpack 打包处理特定的文件模块 。比如：

• css-loader 可以打包处理 .css 相关的文件

• less-loader 可以打包处理 .less 相关的文件

• babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

4.1、css-loader

---

• loader是webpack中一个非常核心的概念。

webpack用来做什么呢？

• 在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。

• 但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。

• 对于webpack本身的能力来说，对于这些转化是不支持的。

• 那怎么办呢？给webpack扩展对应的 loader 就可以啦。

loader使用过程：

• 步骤一：通过 npm 安装需要使用的 loader

• 步骤二：在 webpack.config.js 中的 modules 关键字下进行配置

4.1.1、css文件处理准备工作

项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。

1. 在src目录中，创建一个css文件，其中创建一个normal.css文件。

2. 我们也可以重新组织文件的目录结构，将零散的js文件放在一个js文件夹中。

3. normal.css 中的代码非常简单，就是将body设置为red

4. 在webpack中文网中有 loader的用法：https://www.webpackjs.com/

• css 文件的打包需要用到 style-loader，css-loader

• 先安装 style-loader，再安装 css-loader

• 之后在 main.js 引用我们自己的 css 文件，再打包即可

总结步骤：

1. 首先安装 style-loader 和 css-loader

npm install --save-dev css-loader

npm install style-loader --save-dev

2. 在 webpack.config.js 的 module-> rules 数组中，添加loader规则如下

module: { // 所有第三方文件模块的匹配规则

rules: [ // 文件后缀名的匹配规则

{

test: /.css$/,

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

}

]

}

其中， test 表示匹配的文件类型，use 表示对应要调用的 loader

注意：

• use 数组中指定的 loader 顺序是固定的

• 多个 loader 的调用顺序是：从后往前调用

4.2、less-loader

---

如果我们希望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？

我们这里以less为例，其他也是一样的。

我们还是先创建一个less文件，依然放在css文件夹中

1. 继续在中文文档里面查看 less-loader 的用法

2. 在 main.js 中进行引用即可

3. 打包

4.3、图片文件处理

---

首先，我们在项目中加入两张图片：

• 一张较小的图片test01.jpg(小于8kb)，一张较大的图片test02.jpeg(大于8kb)

• 我们会针对这两张图片进行不同的处理

• 我们先考虑在css样式中引用图片的情况，所以更改 normal.css 中的样式，就是使用背景图片

4.3.1、url-loader

图片处理

1. 我们使用 url-loader 来处理，依然先安装 url-loader，然后在 webpack.config.js 中进行配置

再次打包，运行 index.html，就会发现我们的就会发现我们的背景图片显示出来。而仔细观察，你会发现背景图是通过base64显示出来的，这也是limit属性的作用，当图片小于8kb时，对图片进行base64编码

• 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.

• 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.

4.3.2、file-loader

大于 limit 的图片，会通过file-loader进行处理

4.3.3、修改图片名称和路径

我们发现webpack自动帮助我们生成一个非常长的名字，这是一个32位hash值，目的是防止名字重复，但是，真实开发中，我们可能对打包的图片名字有一定的要求，比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复。

所以，我们可以在options中添加上如下选项：

• img：文件要打包到的文件夹

• name：获取图片原来的名字，放在该位置

• hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位

• ext：使用图片原来的扩展名

另外，默认情况下，webpack 会将生成的路径直接返回给使用者，但是，我们整个程序是打包在 dist 文件夹下的，所以需要在路径下添加 dist/ （是在出口函数处使用publicPath 设置）

4.4、babel-loader

---

webpack只能打包处理一部分 高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babelbabel-loader 进行打包处理。

如果希望将ES6的语法转成ES5，那么就需要使用 babel-loader 进行打包处理

1. 安装 babel-loader

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

2. 配置 webpack.config.js 文件

module: {

rules: [

{

test: /.m?js$/,

exclude: /node_modules/,

use: {

loader: ‘babel-loader’,

options: {

presets: [

[‘@babel/preset-env’, { targets: “defaults” }]

]

}

}

}

]

}

3. 重新打包，查看bundle.js文件，发现其中的内容变成了ES5的语法

5、webpack中的插件

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

• plugin是插件的意思，通常是用于对某个现有的架构进行扩展。

• webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等

loader 和 plugin 区别？

• loader主要用于转换某些类型的模块，它是一个转换器。

• plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin 使用步骤：

• 步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)

• 步骤二：在webpack.config.js中的plugins中配置插件

5.1、添加版权的plugin

---

• 该插件的名字叫做 BannerPlugin，属于 webpack 自带的插件。

步骤如下：

1. 在 webpack.config.js 中导入 webpack

const webpack = require(‘webpack’);

2. 配置在 plugins 中

module.exports = {

…

plugins: [

new webpack.BannerPlugin(‘最终版权归aaa所有’)

]

}

5.2、打包html的plugin

---

目前，我们的index.html文件是存放在项目的根目录下的。我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用html-webpack-plugin插件

html-webpack-plugin 插件可以为我们做这些事情：

• 自动生成一个index.html文件(可以指定模板来生成)

• 将打包的js文件，自动通过script标签插入到body中

1. 安装

nom install html-webpack-plugin --save-dev

2. 在 webpack.config.js 中导入 HTML 插件

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

3. 使用插件，修改webpack.config.js文件中plugins部分的内容如下

• 这里的template表示根据什么模板来生成 index.html

• 另外，我们需要删除之前在output中添加的publicPath属性，否则插入的script标签中的src可能会有问题

// 1.导入HTML插件,得到一个构造函数

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

// 2.创建HTML插件的实例对象

const htmlPlugin = new HtmlPlugin({

template: ‘./src/index.html’, // 指定原文件的存放路径

filename: ‘./index.html’, // 指定生成的文件的存放路径

})

module.exports = {

mode: ‘development’,

plugins: [htmlPlugin], // 通过 plugins 节点,使 htmlPlugin 插件生效

}

5.3、webpack-dev-server

---

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

类似于 node.js 阶段用到的 nodemon 工具，每当修改了源代码， webpack 会自动进行项目的打包和构建

1. 它是一个单独的模块，在webpack中使用之前需要先安装它

npm install --save-dev webpack-dev-server

2. 修改 package.json -> scripts 中的 dev 命令

open参数表示直接打开浏览器，不加 --open 表示不自动打开服务器

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

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

我特地针对初学者整理一套前端学习资料

, // 指定生成的文件的存放路径

})

module.exports = {

mode: ‘development’,

plugins: [htmlPlugin], // 通过 plugins 节点,使 htmlPlugin 插件生效

}

5.3、webpack-dev-server

---

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

类似于 node.js 阶段用到的 nodemon 工具，每当修改了源代码， webpack 会自动进行项目的打包和构建

1. 它是一个单独的模块，在webpack中使用之前需要先安装它

npm install --save-dev webpack-dev-server

2. 修改 package.json -> scripts 中的 dev 命令

open参数表示直接打开浏览器，不加 --open 表示不自动打开服务器

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

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

我特地针对初学者整理一套前端学习资料

[外链图片转存中…(img-xQRyCj1Y-1715711544692)]

[外链图片转存中…(img-7dPTkkOU-1715711544693)]