Vue2 零基础入门 Vue2 零基础入门第一天 1.3 webpack中的插件 && 1.4 webpack中的loader

Vue2 零基础入门

Vue2 零基础入门第一天

老师：黑马程序员

1 前端工程化与webpack

1.3 webpack中的插件

1.3.1 webpack插件的作用

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的webpack 插件有如下两个：

① webpack-dev-server

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

② html-webpack-plugin

• webpack 中的 HTML 插件（类似于一个模板引擎插件）
• 可以通过此插件自定制 index.html 页面的内容

1.3.2 webpack-dev-server插件

【作用】

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。

【安装】

npm install webpack-dev-server@3.11.2 -D
1

【配置webpack-dev-server】

webpack-dev-server 会启动一个实时打包的 http 服务器

【打包生成的文件】

① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上

• 严格遵守开发者在 webpack.config.js 中指定配置
• 根据 output 节点指定路径进行存放

② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中

• 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
• 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

【生成到内存中的文件该如何访问】

webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

• 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
• 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

1.3.3 html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。

需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份

【安装】

npm install html-webpack-plugin@5.3.2 -D
1

【配置】

【其他】

① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中

② HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

1.3.4 devServer节点

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置

凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效

1.4 webpack中的loader

1.4.1 loader概述

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

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

• css-loader 可以打包处理 .css 相关的文件
• less-loader 可以打包处理 .less 相关的文件
• babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

1.4.2 loader的调用过程

1.4.3 打包处理CSS文件

1.4.4 打包处理less文件

① 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令

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

1.4.5 打包处理样式表中与url路径相关的文件

① 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令

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

其中 ? 之后的是 loader 的参数项：

• limit 用来指定图片的大小，单位是字节（byte）
• 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

1.4.6 打包处理js文件中的高级语法

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

【安装 babel-loader 相关的包】

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
1

添加loader规则

【配置babel-loader】

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下

in-proposal-decorators@7.14.5 -D

添加loader规则



[外链图片转存中...(img-QcgY1WrC-1662685005676)]







【配置babel-loader】



在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下



[外链图片转存中...(img-HWuYMGvH-1662685005676)]

































1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57