Webpack常见插件和模式

news/2024/4/28 14:48:48/文章来源:https://blog.csdn.net/m0_69551472/article/details/137026505

目录

目录

  • 目录
    • 认识 Plugin
      • CleanWebpackPlugin
      • HtmlWebpackPlugin
        • 自定义模版
      • DefinePlugin的介绍 ( 持续更新 )
        • Mode 配置

认识 Plugin

Loader是用于特定的模块类型进行转换；
Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等

CleanWebpackPlugin

前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹：
我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin；
CleanWebpackPlugin 是一个用于清理/dist文件夹中所有文件的插件，除了被Webpack创建的文件。
以下是配置 CleanWebpackPlugin 的步骤：

  1. 首先，需要安装 CleanWebpackPlugin 插件，可以通过 npm 进行安装：
npm install clean-webpack-plugin --save-dev
  1. 然后，在 webpack 配置文件中引入该插件：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  1. 最后，在 webpack 配置文件的 plugins 部分使用该插件：
module.exports = {// ...plugins: [new CleanWebpackPlugin(),// ...],// ...
};

这样，每次运行 webpack 时，/dist 文件夹中的所有旧文件都会被清理，只留下由 webpack 创建的新文件。这有助于确保每次构建都是从干净的状态开始，避免旧文件对新构建造成影响。

HtmlWebpackPlugin

自定义 HTML 模版
自定义模板数据填充

HtmlWebpackPlugin 的用法是在 webpack 配置中引入插件，并在 plugins 选项中使用它。基本用法是创建一个新的 HTML 文件，并自动将打包好的 JavaScript 和 CSS 文件注入到这个 HTML 文件中。

在 webpack 配置文件中，可以通过以下步骤使用 HtmlWebpackPlugin：

  1. 安装插件：首先需要通过 npm 安装 html-webpack-plugin 插件到项目的开发依赖中，使用命令 npm install --save-dev html-webpack-plugin。
  2. 引入插件：在 webpack 配置文件中，使用 const HtmlWebpackPlugin = require('html-webpack-plugin'); 引入插件。
  3. 配置插件：在 webpack 配置的 plugins 数组中添加一个新的 HtmlWebpackPlugin 实例。例如：new HtmlWebpackPlugin({})。这个插件支持多种选项，如 template（指定模板文件）、inject（指定输出文件的注入位置）、filename（指定输出文件名）等。
  4. 多次引用：如果需要生成多个 HTML 文件，可以在 plugins 数组中多次引用 HtmlWebpackPlugin，每次引用时可以设置不同的选项来定制每个 HTML 文件的内容和行为。

HtmlWebpackPlugin 的配置通常包括以下内容：

  1. 模板文件：通过 template 选项指定用于创建 HTML 文件的模板。这可以是一个简单的 HTML 字符串，一个包含占位符的 lodash 模板，或者是一个自定义的 loader。
  2. 注入位置：通过 inject 选项指定将打包好的资源文件（如 JavaScript、CSS）注入到 HTML 文件的哪个部分。常见的值有 'body' 和 'head'。
  3. 输出文件名：通过 filename 选项指定生成的 HTML 文件的名称和路径。这与 webpack 配置中的 output.filename 类似，但 HtmlWebpackPlugin 允许指定路径。
  4. 包含/排除模块：通过 chunks 和 excludeChunks 选项分别指定要包含或排除的模块。这对于控制哪些模块被打包进最终的 HTML 文件非常有用。
  5. 压缩 HTML：通过 minify 选项可以对生成的 HTML 文件进行压缩，以提高加载速度和性能。minify 的值是一个对象，可以包含多种压缩选项。

综上所述，HtmlWebpackPlugin 是一个非常实用的 webpack 插件，它简化了 HTML 文件的创建和管理过程，特别是对于那些需要处理复杂构建和哈希值变化的场景。通过合理配置，它可以大大提高前端项目的构建效率和可靠性。

以下是一个使用 HtmlWebpackPlugin 的详细 webpack 配置文件示例：

// webpack.config.js
const path = require('path');
// 导入
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// 入口文件entry: './src/index.js',// 输出配置output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[contenthash].js',clean: true,},// 模块配置（此处省略，可能包含加载器配置等）module: {},// 插件配置plugins: [// 使用 HtmlWebpackPlugin 创建一个新的 HTML 文件，自动注入所有生成的 bundle.js 和 style.cssnew HtmlWebpackPlugin({title: 'My App', // HTML 标题template: path.join(__dirname, 'src', 'module.html'), // 模板文件路径inject: 'body', // 将资源文件注入到 body 底部filename: 'index.html', // 输出文件名// 指定需要引入的 chunks，例如不引入第三方库 axioschunks: ['app'],// 排除某些 chunks，例如不引入 manifest.jsonexcludeChunks: ['manifest'],// 根据模板中的标记进行替换，如 <%= htmlWebpackPlugin.files.js.map %>files: {css: ['style.css'],js: ['main.js'],},// 压缩 HTML 文件minify: {collapseWhitespace: true,removeComments: true,removeRedundantAttributes: true,removeScriptTypeAttributes: true,removeStyleLinkTypeAttributes: true,useShortDoctype: true,},// 其他选项...}),],
};

在这个配置文件中，我们做了以下操作：

  1. 入口 (entry): 定义了应用的入口点为 './src/index.js'。
  2. 输出 (output): 定义了打包后的文件存放目录为项目的 'dist' 目录，并设置了文件名包含内容哈希值 [contenthash]，以便在文件内容改变时能够更新文件名。
  3. 模块 (module): 这里省略了详细的加载器配置，通常你会根据项目需求添加样式、图片等资源文件的加载器。
  4. 插件 (plugins): 使用了 HtmlWebpackPlugin 插件，并进行了详细的配置。

HtmlWebpackPlugin 的配置项包括：

  • title: 设置 HTML 文档的标题。
  • template: 指定使用的模板文件路径，该文件会被作为新生成的 HTML 文件的基础。
  • inject: 设置资源文件应该被注入到 HTML 文件的哪个位置，可选值有 'body' (默认) 或 'head'。
  • filename: 设置生成的 HTML 文件的名称。
  • chunks: 指定哪些入口 chunk 需要被包含在 HTML 文件中，可以通过函数进行更细粒度的控制。
  • excludeChunks: 指定哪些入口 chunk 需要被排除。
  • files: 一个对象，其键是文件类型，值是与这些类型相关的文件名列表。这允许你通过模板中的占位符动态替换文件。
  • minify: 一个对象，包含是否压缩 HTML 以及如何压缩的各种选项。
  • other options: HtmlWebpackPlugin 支持很多其他选项，可以进一步自定义插件行为。

请注意，这个配置文件只是一个示例，实际项目中你可能需要根据项目的具体需求对配置进行调整。

自定义模版

在 HtmlWebpackPlugin 中，你可以使用自定义的 HTML 模板来满足这些需求。

首先，你需要创建一个包含你想要添加的内容的 HTML 文件。例如，假设你有一个名为 my-template.html 的文件，其中包含以下内容：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- 其他内容 -->
</body>
</html>

在这个文件中，我们使用了占位符 <%= htmlWebpackPlugin.options.title %> 来动态替换标题。这个占位符将在生成的 HTML 文件中被实际值替换。

接下来，在你的 webpack.config.js 文件中，你需要将 template 选项设置为你的自定义模板文件的路径。例如：

new HtmlWebpackPlugin({template: path.join(__dirname, 'src', 'my-template.html'), // 设置自定义模板文件路径// 其他配置项...
}),

这样，当你运行 webpack 时，它将使用你的自定义模板文件来创建新的 HTML 文件，并将占位符替换为实际值。

请注意，如果你需要在多个页面中使用相同的模板，你可以在 HtmlWebpackPlugin 实例中重复使用相同的模板文件路径。

DefinePlugin的介绍 ( 持续更新 )

在这里插入图片描述
直接运行会报错, 没有BASE_URL

在JavaScript中，可以使用DefinePlugin插件来注入变量。首先需要安装webpack和html-webpack-plugin，然后在webpack.config.js文件中进行配置。以下是具体的操作步骤：

  1. 安装webpack和html-webpack-plugin：
npm install --save-dev webpack html-webpack-plugin
  1. 在项目根目录下创建一个名为webpack.config.js的文件，并添加以下内容：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},plugins: [new HtmlWebpackPlugin({template: './src/index.html',}),],
};
  1. 在src目录下创建一个名为index.html的文件，并添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script src="bundle.js"></script>
</body>
</html>
  1. 修改src/index.html中的<link>标签，使用DefinePlugin定义的常量：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><% if (BASE_URL) { %><link rel="icon" href="<%= BASE_URL %>favicon.ico"><% } %>
</head>
<body><div id="app"></div><script src="bundle.js"></script>
</body>
</html>
  1. 在webpack.config.js中添加DefinePlugin配置：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},plugins: [new HtmlWebpackPlugin({template: './src/index.html',}),new DefinePlugin({'BASE_URL': JSON.stringify('https://example.com/'),}),],
};

现在，当你运行webpack时，<link>标签中的href属性将使用definePlugin定义的BASE_URL常量，不再报错。

Mode 配置

Mode配置选项，可以告知webpack使用相应模式的内置优化：
 默认值是production（什么都不设置的情况下）；
 可选值有：‘none’ | ‘development’ | ‘production’；
例子
在Webpack中，mode是一个配置选项，用于指定构建的模式。它决定了Webpack的优化和打包策略。默认情况下，Webpack提供了两种模式：development和production。

如果你想使用DefinePlugin来设置环境变量，并且希望根据不同的模式进行配置，你可以将mode添加到你的配置文件中。以下是一个示例：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack');module.exports = (env, options) => {const isProduction = options.mode === 'production';return {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},plugins: [new HtmlWebpackPlugin({template: './src/index.html',}),new DefinePlugin({'process.env': {NODE_ENV: JSON.stringify(isProduction ? 'production' : 'development'), // 根据模式设置环境变量},}),],};
};

在上面的示例中，我们使用了函数形式的配置，并接收了两个参数：env和options。options.mode表示当前的构建模式。通过检查options.mode的值，我们可以确定当前是生产模式还是开发模式，并根据需要设置环境变量。
这样，当你运行Webpack构建时，根据不同的模式，process.env.NODE_ENV将被设置为'production'或'development'。

Mode 配置代表更多
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_1028072.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【zlm】问题记录：chrome更新引起的拉不出webrtc； 证书校验引起的放几秒中断

【zlm】问题记录：chrome更新引起的拉不出webrtc； 证书校验引起的放几秒中断

目录 chrome更新引起的拉不出webrtc 证书校验引起的放几秒中断 chrome更新引起的拉不出webrtc 【zlm】最新的chrome版本中的报错&#xff1a; 我有个问题event.js:8 [RTCPusherPlayer] DOMException: Failed to execute setRemoteDescription on RTCPeerConnection: Failed …
阅读更多...
Java前端控制器模式

Java前端控制器模式

文章目录 以下是Java前端控制器模式的主要组成部分和工作原理&#xff1a;组件与角色&#xff1a;工作流程&#xff1a;应用场景与优势&#xff1a; Java Web应用程序示例 Java前端控制器模式是一种软件设计模式&#xff0c;它在构建基于Java的Web应用程序时特别有用&#xff0…
阅读更多...
如何使用 ArcGIS Pro 制作三维建筑

如何使用 ArcGIS Pro 制作三维建筑

三维地图已经逐渐成为未来地图的趋势&#xff0c;对于大范围应用&#xff0c;只需要普通的建筑体块就行&#xff0c;如果有高程数据&#xff0c;还可以结合地形进行显示&#xff0c;这里为大家介绍一下 ArcGIS Pro 制作三维建筑的方法&#xff0c;希望能对你有所帮助。 数据来…
阅读更多...
使用seldom编写http接口用例

使用seldom编写http接口用例

在编写接口用例的过程中&#xff0c;针对一个接口&#xff0c;往往只是参数不同&#xff0c;那么参数化就非常有必要了。 seldom 中参数化的用法非常灵活&#xff0c;这里仅介绍file_data() 的N种玩法。 二维列表 当参数比较简单时可以试试下面的方式。 参数化数据 {"…
阅读更多...
老阳推荐的视频号项目是真的吗?能赚钱吗?

老阳推荐的视频号项目是真的吗?能赚钱吗?

在当下数字化、信息化的社会背景下&#xff0c;视频号项目如雨后春笋般涌现&#xff0c;成为许多人关注的焦点。特别是在一些知名人士&#xff0c;如老阳的推荐下&#xff0c;这些项目更是受到了广泛的关注和讨论。那么&#xff0c;老阳推荐的视频号项目是否真实存在?它能否真…
阅读更多...
uni-app（使用阿里图标）

uni-app（使用阿里图标）

1.注册阿里矢量图标库 注册阿里图标库账号并登录&#xff0c;https://www.iconfont.cn/ 2.加入购物车 搜索适合自己的图标&#xff0c;加入购物车&#xff0c;如下图&#xff1a; 3.加入项目 我的->资源管理->我的项目->创建项目&#xff0c;然后返回购物车&#…
阅读更多...
cesium vue 绘制标记实体（撒点），监听鼠标左击事件

cesium vue 绘制标记实体（撒点），监听鼠标左击事件

添加实体 const viewer new Cesium.Viewer(cesiumContainer, {})viewer.entities.add()查看实体 const viewer new Cesium.Viewer(cesiumContainer, {}) const billboard viewer.entities.add({...})viewer.zoomTo(billboard)删除实体 根据实体删除 if (billboard.value…
阅读更多...
快速上手Spring Cloud 六：容器化与微服务化

快速上手Spring Cloud 六：容器化与微服务化

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …
阅读更多...
目标检测+车道线识别+追踪

目标检测+车道线识别+追踪

一种方法&#xff1a; 车道线检测-canny边缘检测-霍夫变换 一、什么是霍夫变换 霍夫变换&#xff08;Hough Transform&#xff09;是一种在图像处理和计算机视觉中广泛使用的特征检测技术&#xff0c;主要用于识别图像中的几何形状&#xff0c;尤其是直线、圆和椭圆等常见形状…
阅读更多...
C++从入门到精通——函数重载

C++从入门到精通——函数重载

函数重载 前言一、函数重载概念二、函数重载的分类参数类型不同的函数重载参数个数不同的函数重载参数类型顺序不同的函数重载 三、函数重载的具体代码展示main.cpp 四、为什么为什么C支持函数重载&#xff0c;而C语言不支持函数重载呢 前言 函数重载是指在同一个作用域内&…
阅读更多...
argo rollout使用

argo rollout使用

一、前言 argorollout是比argocd更高级的发布工具&#xff0c;其中包含自动化金丝雀发布、自动化蓝绿发布、还可以通过argo命令或者dashboard查看发布的过程 二、使用 需要先部署argo rollout服务 参考&#xff1a;https://github.com/argoproj/argo-rollouts/tree/master/m…
阅读更多...
微信小程序的页面制作---常用组件及其属性2

微信小程序的页面制作---常用组件及其属性2

一、标签栏taBar 在全局配置文件app.json中添加taBar配置&#xff0c;可实现标签栏配置。标签栏最少2个&#xff0c;最多5个 &#xff08;1&#xff09;如何配置标签栏&#xff1f; 1》先建多个文件&#xff0c;&#xff08;以我的index&#xff0c;list&#xff0c;myform文…
阅读更多...
RelayAttention：让大型语言模型更高效地处理长提示符

RelayAttention：让大型语言模型更高效地处理长提示符

一、前言 虽然大型语言模型 (LLM) 近年来取得了非常显著的进展&#xff0c;也在各种自然语言处理任务中展现出强大的能力。然而&#xff0c;LLM 的在实际的应用落地层面也面临着一些实际挑战&#xff0c;其中之一就是效率和成本问题&#xff0c;导致了在垂直行业实际落地的应用…
阅读更多...
CE-Net：用于2D医学图像分割的上下文编码器网络

CE-Net：用于2D医学图像分割的上下文编码器网络

CE-Net&#xff1a;用于2D医学图像分割的上下文编码器网络 摘要引言方法 【2019】CE-NetContext Encoder Network for 2D Medical Image Segmentation 摘要 医学图像分割是医学图像分析中的重要步骤。随着卷积神经网络在图像处理中的快速发展&#xff0c;深度学习已经被用于医…
阅读更多...
服务器被攻击有什么表现？

服务器被攻击有什么表现？

引言 在现今高度互联的网络环境中&#xff0c;服务器安全已成为每个企业和个人站长不容忽视的重要议题。服务器作为承载关键业务和数据的核心设施&#xff0c;一旦遭受攻击&#xff0c;不仅可能导致服务中断、数据泄露&#xff0c;还可能带来严重的经济损失和声誉损害。本文旨…
阅读更多...
【二叉树】Leetcode 98. 验证二叉搜索树【中等】

【二叉树】Leetcode 98. 验证二叉搜索树【中等】

验证二叉搜索树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 示例1&a…
阅读更多...
fpga 通过axi master读写PS侧DDR的仿真和上板测试

fpga 通过axi master读写PS侧DDR的仿真和上板测试

FPGA和ARM数据交互是ZYNQ系统中非常重要的内容。PS提供了供FPGA读写的AXI-HP接口用于两者的高速通信和数据交互。一般的&#xff0c;我们会采用AXI DMA的方式去传输数据&#xff0c;DMA代码基本是是C编写&#xff0c;对于FPGA开发者来说不利于维护和debug。本文提供一种手写AXI…
阅读更多...
6、鸿蒙学习-Stage模型应用程序包结构

6、鸿蒙学习-Stage模型应用程序包结构

基于Stage模型开发的应用&#xff0c;经编译打包后&#xff0c;其应用程序的结构如下图应用程序包结构&#xff08;Stage模型&#xff09;所示。开发者需要熟悉应用程序包结构相关的基本概念。 一、在开发态&#xff0c;一个应用包含一个或者多个Module&#xff0c;可以在DevE…
阅读更多...
“免密支付”出事了？看看背后的安全隐患

“免密支付”出事了？看看背后的安全隐患

#免密支付# 的安全问题近日冲上热搜&#xff0c;大家来看看怎么一回事。 “我不知道什么时候开通的‘免密支付’功能&#xff0c;直到手机频繁收到账单提醒&#xff0c;才发现平台账号被盗&#xff0c;对方通过‘免密支付’消费了5000多元。这种事关会员安全的操作提示应该设置…
阅读更多...
机器学习概论—增强学习

机器学习概论—增强学习

机器学习概论—增强学习 强化学习（Reinforcement Learning, RL）或者说是增强学习，是机器学习的一个领域，旨在使智能体通过与环境的交互学习如何做出决策，它是关于在特定情况下采取适当的行动来最大化奖励。它被各种软件和机器用来寻找在特定情况下应采取的最佳行为或路径…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业