Webpack 插件丨前端基础必备

Posted 黑马程序员官方

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack 插件丨前端基础必备相关的知识,希望对你有一定的参考价值。

1. webpack 插件的作用

通过安装和配置第三方的插件,可以拓展 webpack 的能力,从而让 webpack 用起来更方便。最常用的

webpack 插件有如下两个:

webpack-dev-server

类似于 node.js 阶段用到的 nodemon 工具

每当修改了源代码,webpack 会自动进行项目的打包和构建

html-webpack-plugin

webpack 中的 HTML 插件(类似于一个模板引擎插件)

可以通过此插件自定制 index.html 页面的内容

2. webpack-dev-server

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

2.1 安装 webpack-dev-server

运行如下的命令,即可在项目中安装此插件:

npm install webpack-dev-server@3.11.2 -D

2.2 配置 webpack-dev-server

① 修改 package.json -> scripts 中的 dev 命令如下:

 

② 再次运行 npm run dev 命令,重新进行项目的打包

③ 在浏览器中访问 http://localhost:8080 地址,查看自动打包效果

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

2.3 打包生成的文件哪儿去了?

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

严格遵守开发者在 webpack.config.js 中指定配置

根据 output 节点指定路径进行存放

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

不再根据 output 节点指定的路径,存放到实际的物理磁盘上

提高了实时打包输出的性能,因为内存比物理磁盘速度快很多

2.4 生成到内存中的文件该如何访问?

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

可以直接用 / 表示项目根目录后面跟上要访问的文件名称,即可访问内存中的文件

例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

3. html-webpack-plugin

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

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

3.1 安装 html-webpack-plugin

运行如下的命令,即可在项目中安装此插件:

npm install html-webpack-plugin@5.3.2 -D

3.2 配置 html-webpack-plugin

3.3 解惑 html-webpack-plugin

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

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

4. devServer 节点

在 webpack.config.js 配置文件中,可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置, 示例代码如下:

 

注意:凡是修改了 webpack.config.js 配置文件,或修改了 package.json 配置文件, 必须重启实时打包的服务器 ,否则最新的配置文件无法生效! 相关内容发布前端工程化之构建工具webpack 的基本使用

黑马前端专栏干货多多,关注再学,好方便~

2022年前端学习路线图:课程、源码、笔记,技术栈 另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我喔~
 

 

以上是关于Webpack 插件丨前端基础必备的主要内容,如果未能解决你的问题,请参考以下文章

为什么我们要做三份 Webpack 配置文件

工具 | 为什么我们要做三份 Webpack 配置文件

webpack-基础知识

10天彻底搞定 webpack,前端开发必备技能分享!

前端入门 —— 了解 webpack 和 各类插件的配置

前端入门 —— 了解 webpack 和 各类插件的配置