Webpack常见插件和模式

news2024/11/26 16:51:03

目录


目录

  • 目录
    • 认识 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.css
    new HtmlWebpackPlugin({
      title: 'My App', // HTML 标题
      template: path.join(__dirname, 'src', 'module.html'), // 模板文件路径
      inject: 'body', // 将资源文件注入到 body 底部
      filename: 'index.html', // 输出文件名
      // 指定需要引入的 chunks,例如不引入第三方库 axios
      chunks: ['app'],
      // 排除某些 chunks,例如不引入 manifest.json
      excludeChunks: ['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.coloradmin.cn/o/1553974.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux离线安装maven

一、下载maven 地址&#xff1a;Maven – Download Apache Maven 使用root权限用户登录服务器 cd /opt sudo mkdir maven cd maven 二、上传maven 使用Xftp工具 三、解压并配置环境变量 tar -zxvf tar -zxvf apache-maven-3.9.6-bin.tar.gz cd apache-maven-3.9.6/ 看到解压…

三极管工作方式

如下图&#xff1a; 谨记&#xff1a; NPN 型&#xff1a; B 0 截止 B 1 导通 PNP 型&#xff1a; B 0 导通 B 1 截止 来源&#xff1a;% - 闲鹤

面对1.2亿月活的UGC平台,游戏开发者有哪些机会? | TOPON变现干货

4月21日&#xff0c;TopOn、七麦数据、罗斯基共同主办的《游戏赛道新机会》主题沙龙在深圳举办。活动邀请到了国内多家知名厂商和平台的负责人&#xff0c;大家从个人业务的角度出发&#xff0c;为从业者分享最新的行业趋势和方法论。 在活动上&#xff0c;迷你玩内容生态运营…

OSPF GTSM(通用TTL安全保护机制)

目录 GTSM的定义 使用GTSM的目的 GTSM的原理 配置OSPF GTSM实例 组网需求 配置思路 操作步骤 1. 配置各接口的IP地址 2.配置OSPF基本功能 3.配置OSPF GTSM 4. 验证配置结果 GTSM的定义 GTSM&#xff08;Generalized TTL Security Mechanism&#xff09;&#xff0c;…

订单系统-RPC快速入门

RPC快速入门 概述 关于rpc&#xff0c;只需要知道他是一种协议&#xff0c;项目之间能够远程调用函数。 快速入门 我们前边下载好的两个包&#xff0c;在idea中打开之后&#xff0c;我们创建这么几个文件夹。 至于是干什么的&#xff0c;以后细说。创建好之后我们在produc…

halcon例程学习——ball.hdev

dev_update_window (off) dev_close_window () dev_open_window (0, 0, 728, 512, black, WindowID) read_image (Bond, die/die_03) dev_display (Bond) set_display_font (WindowID, 14, mono, true, false) *自带的 提示继续 disp_continue_message (WindowID, black, true)…

uniapp开发App——登陆流程 判断是否登陆,是,进入首页,否,跳转到登录页

一、登陆流程 文字描述&#xff1a;用户进入App&#xff0c;之后就是判断该App是否有用户登陆过&#xff0c;如果有&#xff0c;直接进入首页&#xff0c;否则跳转到登陆页&#xff0c;登陆成功后&#xff0c;进入首页。 流程图如下&#xff1a; 二、在uniapp项目中代码实现 实…

用html实现一个日历便签设计

<!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>日历便签设计</title><link hrefhttps://fonts.googleapis.com/css?familyMontserrat:700,400 relstylesheet typetext/css><link hr…

【C++程序员的自我修炼】基础语法篇(一)

心中若有桃花源 何处不是水云间 目录 命名空间 &#x1f49e;命名空间的定义 &#x1f49e; 命名空间的使用 输入输出流 缺省参数 函数的引用 引用的定义&#x1f49e; 引用的表示&#x1f49e; 引用的特性&#x1f49e; 常量引用&#x1f49e; 引用的使用场景 做参数 做返回值…

千川素材投放效果追踪与精准识别:从数据洞察到策略优化的全面跃升

一、数据驱动的投放效果追踪在数字化营销时代&#xff0c;数据的力量不可忽视。对于广告主而言&#xff0c;投放效果追踪不仅是对广告效果的简单度量&#xff0c;更是对市场反应、用户行为和广告策略的深入分析。通过数据驱动的投放效果追踪&#xff0c;广告主可以更加精准地了…

睿考网:税务师考试科目难吗?

税务师资格考试共包含五门课程&#xff0c;即《税法一》、《税法二》、《涉税服务实务》、《涉税服务相关法律》以及《财务与会计》。 每一门科目的满分为140分&#xff0c;其中及格线为84分&#xff0c;全科的成绩有效期为五年&#xff0c;考生在连续五个考试年度内通过全部应…

【python】爬取4K壁纸保存到本地文件夹【附源码】

欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 图片信息丰富多彩&#xff0c;许多网站上都有大量精美的图片资源。有时候我们可能需要批量下载这些图片&#xff0c;而手动一个个下载显然效率太低。因此&#xff0c;编写一个简单的网站图片爬取程序可以帮助我们…

C#_泛型_委托

文章目录 泛型泛型的使用泛型的约束委托委托的实例化多播委托委托的调用内置委托类型委托练习泛型委托Lambda表达式(进阶)上期习题答案本期习题 泛型 泛型&#xff08;Generic&#xff09; 是一种规范&#xff0c;它允许我们使用占位符来定义类和方法&#xff0c;编译器会在编…

多模态检索增强生成的简单介绍

原文地址&#xff1a;An Easy Introduction to Multimodal Retrieval Augmented Generation 2024 年 3 月 20 日 如果检索增强生成(RAG) 应用程序可以处理多种数据类型&#xff08;表格、图形、图表和图表&#xff09;而不仅仅是文本&#xff0c;那么它的实用性就会呈指数级…

【能省则省】搭建网站仅50/年 云服务器选择建议 程序员职场刚需云产品 附最新价格对比表

《最新对比表》已更新在文章头部—腾讯云文档&#xff0c;文章具有时效性&#xff0c;请以腾讯文档为准&#xff01; 【腾讯文档实时更新】云服务器1分钟教会你如何选择教程 2024-开年采购活动 云服务器专区 京东云 阿里云 腾讯云 配置最新价格表 与 官方活动地址 ​ 当前活动…

Docker进阶:Docker Swarm(集群搭建) —实现容器编排的利器

Docker进阶&#xff1a;Docker Swarm&#xff08;集群搭建&#xff09; —实现容器编排的利器 1、什么是Docker Swarm&#xff1f;2、Docker Swarm 与 Docker Compose的区别3、创建一个Swarm集群&#xff08;1-Manager&#xff0c;2-Worker&#xff09;1、资源准备2、初始化Swa…

机器人姿态估计-IMU、互补滤波算法应用

机器人姿态估计-IMU、互补滤波算法应用 附赠自动驾驶学习资料和量产经验&#xff1a;链接 机器人的姿态测量对于许多应用至关重要&#xff0c;如导航、运动控制等。在这篇文章中&#xff0c;我们将介绍如何利用MPU6050传感器以及互补滤波和卡尔曼滤波算法来实现自平衡车的姿态…

vue 实现自定义分页打印 window.print

首先这里是我自定义了打印界面才实现的效果&#xff0c;如果不用自定义界面实现&#xff0c;应该是一样的吧。具体可能需要自己去试试看 我的需求是界面有两个表格&#xff0c;点击全部打印&#xff0c;我需要把第一表格在打印是第1页&#xff0c;第二个表格是第二页 如图&…

二十二、软考-系统架构设计师笔记-真题解析-2018年真题

软考-系统架构设计师-2018年上午选择题真题 考试时间 8:30 ~ 11:00 150分钟 1.在磁盘调度管理中&#xff0c;应先进行移臂调度&#xff0c;再进行旋转调度。假设磁盘移动臂位于21号柱面上&#xff0c;进程的请求序列如下表所示。如果采用最短移臂调度算法&#xff0c;那么系统…

ensp中pc机访问不同网络的服务器

拓扑图如下&#xff0c;资源已上传 说明&#xff1a;pc通过2个路由访问server服务器 三条线路分别是192.168.1.0网段&#xff0c;192.168.2.0网段和192.168.3.0网段&#xff0c;在未配置的情况下&#xff0c;pc设备是访问不到server的 具体操作流程 第一&#xff1b;pc设备…