Webpack常见插件和模式

目录


目录

  • 目录
    • 认识 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. 包含/排除模块:通过 chunksexcludeChunks 选项分别指定要包含或排除的模块。这对于控制哪些模块被打包进最终的 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插件来注入变量。首先需要安装webpackhtml-webpack-plugin,然后在webpack.config.js文件中进行配置。以下是具体的操作步骤:

  1. 安装webpackhtml-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提供了两种模式:developmentproduction

如果你想使用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'), // 根据模式设置环境变量},}),],};
};

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

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

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

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

相关文章

国内IP切换软件:解锁网络世界的新钥匙

在数字化快速发展的今天&#xff0c;互联网已成为我们生活中不可或缺的一部分。然而&#xff0c;伴随着网络使用的深入&#xff0c;许多用户逐渐意识到&#xff0c;不同的IP地址可能会带来截然不同的网络体验。为了应对这一问题&#xff0c;国内IP切换软件应运而生&#xff0c;…

Java与Go:字符串转IP

在本文中&#xff0c;我们将了解如何将简单的对比Java和Go是如何将字符串解析为IP地址。 Java 在Java中&#xff0c;将字符串转换为IP地址最无脑的一个方法&#xff1a; import java.net.InetAddress; import java.net.UnknownHostException;public class Main {public stat…

深圳区块链交易所app系统开发,撮合交易系统开发

随着区块链技术的迅速发展和数字资产市场的蓬勃发展&#xff0c;区块链交易所成为了数字资产交易的核心场所之一。在这个快速发展的领域中&#xff0c;区块链交易所App系统的开发和撮合交易系统的建设至关重要。本文将探讨区块链交易所App系统开发及撮合交易系统的重要性&#…

数据库系统概论(超详解!!!) 第四节 关系数据库标准语言SQL(Ⅱ)

1.数据查询 SELECT [ ALL | DISTINCT] <目标列表达式>[&#xff0c;<目标列表达式>] … FROM <表名或视图名>[&#xff0c; <表名或视图名> ] … [ WHERE <条件表达式> ] [ GROUP BY <列名1> [ HAVING <条件表达式> ] ] [ ORDER BY…

【数据结构 | 图论】如何用链式前向星存图(保姆级教程,详细图解+完整代码)

一、概述 链式前向星是一种用于存储图的数据结构&#xff0c;特别适合于存储稀疏图&#xff0c;它可以有效地存储图的边和节点信息&#xff0c;以及边的权重。 它的主要思想是将每个节点的所有出边存储在一起&#xff0c;通过数组的方式连接&#xff08;类似静态数组实现链表…

SpringCloudConfig 使用git搭建配置中心

一 SpringCloudConfig 配置搭建步骤 1.引入 依赖pom文件 引入 spring-cloud-config-server 是因为已经配置了注册中心 <dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-config-server</…

Elasticsearch从入门到精通-07ES底层原理学习

Elasticsearch从入门到精通-07ES底层原理和高级功能 &#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是程序员行走的鱼 &#x1f4d6; 本篇主要介绍和大家一块学习一下ES底层原理包括集群原理、路由原理、分配控制、分配原理、文档分析原理、文档并发安全原理以及一些高…

SQL-CRUD-2数据库实验

目录 第一关任务描述 相关知识 插入完整内容的行 插入选定内容的行 编程要求 测试说明 第一关代码 第二关任务描述 相关知识 删除表中的指定行 删除表中的所有行 编程要求 测试说明 第二关代码 第三关任务描述 相关知识 更新表中的指定行 编程要求 测试说明…

【多线程系列】你先说说synchronized的实现原理

面试官&#xff1a;听说你精通多线程&#xff0c;那我就考考你吧 面试官&#xff1a;不用慌尽管说&#xff0c;错了也没关系&#x1f60a;。。。 以贴近现实的【面试官面试】形式来分享技术&#xff0c;本期是《多线程系列》&#xff0c;感兴趣就关注我吧❤️ 面试官&#xff1…

L2-047 锦标赛

这题没做出来&#xff0c;查了一些博客&#xff0c;下面是我比较能接受的理解和书写方式。 读完题可以发现这是一个满二叉树&#xff0c;并且可以得到每场比赛失败者的信息&#xff08;决赛是胜利者和失败者都可以得到&#xff09; 对于一场比赛&#xff0c;它的胜利者要么是左…

Typora结合PicGo + Github搭建个人图床

目录 一 、GitHub仓库设置 1、新建仓库 2、创建Token 并复制保存 二、PicGo客户端配置 1、下载 & 安装 2、配置图床 三、Typora配置 一 、GitHub仓库设置 1、新建仓库 点击主页右上角的 号创建 New repository 填写仓库信息 2、创建Token 并复制保存 点击右上角…

JAVA的NIO和BIO底层原理分析

文章目录 一、操作系统底层IO原理1. 简介2. 操作系统进行IO的流程 二、BIO底层原理1. 什么是Socket2. JDK原生编程的BIO 三、Java原生编程的NIO1. 简介2. NIO和BIO的主要区别3. Reactor模式4. NIO的三大核心组件5. NIO核心源码分析 一、操作系统底层IO原理 1. 简介 IO&#x…

Python工具箱系列(五十一)

九宫格与词云 对图片进行九宫格切割&#xff0c;并且放到微信朋友圈曾经风靡一时。对于python来说&#xff0c;这个也非常简单。 from PIL import Image import mathdef ninerectanglegrid(inputfilename):"""实现九宫格切割Args:inputfilename (string): 输入…

【Vue3进阶】- 第2学堂小商城实战课程前言

该教程为进阶教程&#xff0c;如果你还不了解Vue3的基础知识&#xff0c;可以先前往Vue3基础教程&#xff0c;从入门到实战。 学习时遇到的任何疑问都欢迎在相应课文页面下方的问答区进行提问哦 我能学到什么&#xff1f; 编程写法千千万&#xff0c;实现需求是第一。 教程中…

Python+Django+Yolov5路面墙体桥梁裂缝特征检测识别html网页前后端

程序示例精选 PythonDjangoYolov5路面墙体桥梁裂缝特征检测识别html网页前后端 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonDjangoYolov5路面墙体桥梁裂缝特征检测识别html网页前…

List操作add,clear,addall报错UnsupportedOperationException的解决办法

ArrayList和Arrays.ArrayList是两码事 ArrayList 支持 add&#xff0c;clear&#xff0c;addall Arrays.ArrayList不支持add&#xff0c;clear&#xff0c;addall 这个方法的使用时候&#xff0c;传递的数组必须是对象数组&#xff0c;而不是基本数据类型 JDK源码 /** *返回由…

Python-VBA编程500例-024(入门级)

字符串写入的行数(Line Count For String Writing)在实际应用中有着广泛的应用场景。常见的应用场景有&#xff1a; 1、文本编辑及处理&#xff1a;在编写或编辑文本文件时&#xff0c;如使用文本编辑器或文本处理器&#xff0c;经常需要处理字符串并确定其在文件中的行数。这…

Numpy 初体验

文章目录 第1关&#xff1a;Numpy 创建数组第2关&#xff1a;Numpy 数组的基本运算第3关&#xff1a;Numpy 数组的切片与索引第4关&#xff1a;Numpy 数组的堆叠第5关&#xff1a;Numpy 的拆分 第1关&#xff1a;Numpy 创建数组 编程要求 本关的任务是&#xff0c;补全右侧编辑…

深度学习 - PyTorch基本流程 (代码)

直接上代码 import torch import matplotlib.pyplot as plt from torch import nn# 创建data print("**** Create Data ****") weight 0.3 bias 0.9 X torch.arange(0,1,0.01).unsqueeze(dim 1) y weight * X bias print(f"Number of X samples: {len(…

小狐狸JSON-RPC:钱包连接,断开连接,监听地址改变

detect-metamask 创建连接&#xff0c;并监听钱包切换 一、连接钱包&#xff0c;切换地址&#xff08;监听地址切换&#xff09;&#xff0c;断开连接 使用npm安装 metamask/detect-provider在您的项目目录中&#xff1a; npm i metamask/detect-providerimport detectEthereu…