webpack 常用插件

  1. clean-webpack-plugin
    这个插件的主要作用是清除构建目录中的旧文件，以确保每次构建时都能得到一个干净的环境。
var { CleanWebpackPlugin } = require("clean-webpack-plugin")
const path = require("path");

module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
}

默认情况下，CleanWebpackPlugin 会清除输出目录（即 output.path 指定的目录）中的所有文件和子目录。如果您想自定义哪些文件或目录需要被清除，您可以在创建 CleanWebpackPlugin 实例时传递一个选项

new CleanWebpackPlugin({
  cleanOnceBeforeBuildPatterns: ['**/*', '!/important-file.txt'],
})

在这个例子中，cleanOnceBeforeBuildPatterns 选项是一个字符串数组，用于指定需要被清除的文件或目录。在这个例子中，所有文件和目录都会被清除，但是名为 ‘important-file.txt’ 的文件将被排除在清除之外。

  1. html-webpack-plugin
    在 Webpack 中，html-webpack-plugin 是一个用于生成 HTML 文件的插件。template 参数是这个插件的一个重要配置选项，它指定了要使用的 HTML 模板文件的路径。

当您使用 html-webpack-plugin 时，通常会提供一个 HTML 模板文件，该文件包含了网站的基本结构和引用。html-webpack-plugin 会读取这个模板文件，并根据您的 Webpack 配置和入口点来生成最终的 HTML 文件。
chunks 参数是这个插件的一个重要配置选项，它指定了应该在最终生成的 HTML 文件中包含哪些 chunk（即代码块）

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require("path");
module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: {
        home: "./src/index.js",
        a: "./src/a.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "scripts/[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ["dist/**/*"] }),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "home.html",
            chunks: ["home"]
        }),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "a.html",
            chunks: ["a"]
        })
    ]
}
  1. copy-webpack-plugin
    复制某个文件或整个文件夹到生成目录中
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');
const path = require("path");
module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "scripts/[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new CopyPlugin([
            { from: "./public", to: "./" }
        ])
    ]
}

在这里插入图片描述
复制public下的文件和文件夹到dist目录下。

  1. webpack-dev-server
    open:true,告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 true 以打开你的默认浏览器。
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ],
    devServer: {
        port: 8000,
        open: true,
        proxy: { //代理规则
            "/api": {
                target: "https://www.bing.com",
                changeOrigin: true //更改请求头中的host和origin
            }
        }
    },
    stats: {
        modules: false,
        colors: true
    }
}
  1. file-loader url-loader

file-loader 和 url-loader 都是 Webpack 的加载器（loaders），它们的作用如下：
file-loader：
描述：将文件发送到输出目录，并返回（相对）URL。
用途：通常用于处理图片、字体等文件资源。
配置：您可以通过在 Webpack 配置文件中添加 file-loader 来使用这个加载器。
url-loader：
描述：如果文件大小小于指定的大小，则将文件转换为 base64 URL，否则使用 file-loader 进行处理。
用途：通常与 file-loader 一起使用，用于处理较小的文件资源，将其转换为 base64 URL，以减少 HTTP 请求。
配置：您可以通过在 Webpack 配置文件中添加 url-loader 来使用这个加载器。
总的来说，file-loader 主要用于处理文件资源，而 url-loader 则在 file-loader 的基础上增加了对较小文件的处理能力，以减少 HTTP 请求。

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:5].js"
    },
    module: {
        rules: [
            {
                test: /\.(png)|(gif)|(jpg)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        // limit: false //不限制任何大小，所有经过loader的文件进行base64编码返回
                        limit: 100 * 1024, //只要文件不超过 100*1024 字节，则使用base64编码，否则，交给file-loader进行处理
                        name: "imgs/[name].[hash:5].[ext]"
                    }
                }]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ],
    devServer: {
        open: true
    },
    stats: {
        modules: false,
        colors: true
    }
}

解决路径问题

在使用file-loader或url-loader时，可能会遇到一个非常有趣的问题
比如，通过webpack打包的目录结构如下：

dist
    |—— img
        |—— a.png  #file-loader生成的文件
    |—— scripts
        |—— main.js  #export default "img/a.png"
    |—— html
        |—— index.html #<script src="../scripts/main.js" ></script>

这种问题发生的根本原因：模块中的路径来自于某个loader或plugin，当产生路径时，loader或plugin只有相对于dist目录的路径，并不知道该路径将在哪个资源中使用，从而无法确定最终正确的路径
面对这种情况，需要依靠webpack的配置publicPath解决

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:5].js",
        // publicPath: "/"  //配置关闭时，html文件里的script标签是<script defer src="../scripts/main.e5bb4.js"></script>。配置是'/'时，html文件里的script标签是<script defer src="/scripts/main.c9195.js"></script>
    },
    module: {
        rules: [
            {
                test: /\.(png)|(gif)|(jpg)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: "imgs/[name].[hash:5].[ext]"
                    }
                }]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "html/index.html"
        })
    ],
    devServer: {
        open: true,
        openPage: "html/index.html",
    },
    stats: {
        modules: false,
        colors: true
    }
}

在 Webpack 中，output.publicPath 是一个配置项，它用于指定在引用资源（如图片、字体等）时应该使用的公共路径。

当您在开发环境中使用 Webpack 时，通常会将资源文件（例如 CSS、JS、图片等）放在一个服务器上，并通过一个 URL 来访问这些文件。然而，如果您的资源文件和您的 HTML 文件（即入口文件）不在同一个域名下，那么浏览器可能会阻止您加载这些资源，因为它们被视为跨域请求。

为了解决这个问题，您可以使用 output.publicPath 来告诉 Webpack 在生成资源文件 URL 时应该使用什么样的公共路径。例如，如果您的资源文件放在 https://cdn.example.com/assets/ 这个 URL 下，您可以这样配置 publicPath：

module.exports = {
  //...
  output: {
    publicPath: 'https://cdn.example.com/assets/',
  },
};

然后，Webpack 就会在生成资源文件 URL 时，自动为这些文件添加 publicPath 作为前缀。例如，如果 Webpack 生成了一个名为 main.js 的 JavaScript 文件，并且 publicPath 被设置为 https://cdn.example.com/assets/，那么最终生成的 URL 可能看起来像这样：https://cdn.example.com/assets/main.js。

需要注意的是，publicPath 的值也可以是一个相对路径。例如，如果您的资源文件放在与 HTML 文件相同的域名下，但是位于不同的目录中，您可以这样配置 publicPath：

module.exports = {
  //...
  output: {
    publicPath: '/assets/',
  },
};

在这个例子中，publicPath 被设置为 /assets/，这意味着资源文件会被放置在与 HTML 文件相同域名的根目录下的 /assets/ 目录下。

  1. 内置插件 DefinePlugin BannerPlugin ProvidePlugin

DefinePlugin 允许在 编译时 将你代码中的变量替换为其他值或表达式。这在需要根据开发模式与生产模式进行不同的操作时，非常有用。例如，如果想在开发构建中进行日志记录，而不在生产构建中进行，就可以定义一个全局常量去判断是否记录日志。这就是 DefinePlugin 的发光之处，设置好它，就可以忘掉开发环境和生产环境的构建规则。

请注意，由于本插件会直接替换文本，因此提供的值必须在字符串本身中再包含一个 实际的引号 。通常，可以使用类似 ‘“production”’ 这样的替换引号，或者直接用 JSON.stringify(‘production’)。
为每个 chunk 文件头部添加 banner。

ProvidePlugin自动加载模块，而不必导入或随处要求这些模块。

所有的webpack内置插件都作为webpack的静态属性存在的，使用下面的方式即可创建一个插件对象

const webpack = require("webpack")

new webpack.插件名(options)

DefinePlugin

全局常量定义插件，使用该插件通常定义一些常量值，例如：

new webpack.DefinePlugin({
    PI: `Math.PI`, // PI = Math.PI
    VERSION: `"1.0.0"`, // VERSION = "1.0.0"
    DOMAIN: JSON.stringify("duyi.com")
})

这样一来，在源码中，我们可以直接使用插件中提供的常量，当webpack编译完成后，会自动替换为常量的值

BannerPlugin

它可以为每个chunk生成的文件头部添加一行注释，一般用于添加作者、公司、版权等信息

new webpack.BannerPlugin({
  banner: `
  hash:[hash]
  chunkhash:[chunkhash]
  name:[name]
  author:yuanjin
  corporation:duyi
  `
})

ProvidePlugin

自动加载模块，而不必到处 import 或 require

new webpack.ProvidePlugin({
  $: 'jquery',
  _: 'lodash'
})

然后在我们任意源码中：

$('#item'); // <= 起作用
_.drop([1, 2, 3], 2); // <= 起作用

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

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

相关文章

docker 基础命令

docker 基础命令

docker 安装 更新系统 sudo apt update sudo apt -y dist-upgrade安装docker sudo apt-get -y install ca-certificates curl gnupg lsb-release sudo mkdir -p /etc/apt/keyrings curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/…
阅读更多...
数据结构——链表（精简易懂版）

数据结构——链表（精简易懂版）

文章目录 链表概述链表的实现链表的节点&#xff08;单个积木&#xff09;链表的构建直接构建尾插法构建头插法构建 链表的插入 总结 链表概述 1&#xff0c;链表&#xff08;Linked List&#xff09;是一种常见的数据结构&#xff0c;用于存储一系列元素。它由一系列节点&…
阅读更多...
双链表的应用

双链表的应用

cf edu161 D. Berserk Monsters 思路&#xff1a; 因为考虑到&#xff0c;每个怪是否死亡与其左右的怪息息相关&#xff0c;再者&#xff0c;若当前怪死亡&#xff0c;周围怪的相邻信息也会产生变化&#xff0c;由此可以想到使用双链表进行维护&#xff0c;双链表的维护方式有…
阅读更多...
STM32——中断篇

STM32——中断篇

技术笔记&#xff01; 1 中断相关概念 1.1 什么是中断&#xff1f; 中断是单片机正在执行程序时&#xff0c;由于内部或外部事件的触发&#xff0c;打断当前程序&#xff0c;转而去处理这一事件&#xff0c;当处理完成后再回到原来被打断的地方继续执行原程序的过程。 在AR…
阅读更多...
算法学习系列（五十四）：单源最短路的综合应用

算法学习系列（五十四）：单源最短路的综合应用

目录 引言一、新年好二、通信线路三、道路与航线四、最优贸易 引言 关于这个单源最短路的综合应用&#xff0c;其实最短路问题最简单的就是模板了&#xff0c;这是一个基础&#xff0c;然后会与各种算法结合到一块&#xff0c;就是不再考察单个知识点了&#xff0c;而是各种知…
阅读更多...
ICode国际青少年编程竞赛- Python-1级训练场-基础训练1

ICode国际青少年编程竞赛- Python-1级训练场-基础训练1

ICode国际青少年编程竞赛- Python-1级训练场-基础训练1 1、 Dev.step(4)2、 Dev.step(-4) Dev.step(8)3、 Dev.turnLeft() Dev.step(4)4、 Dev.step(3) Dev.turnLeft() Dev.step(-1) Dev.step(4)5、 Dev.step(-1) Dev.step(3) Dev.step(-2) Dev.turnLeft() Dev.step(…
阅读更多...
su03t语音模块烧录识别不出问题解决方法

su03t语音模块烧录识别不出问题解决方法

今天被su03t模块的烧写问题&#xff0c;卡了一下午&#xff0c;也是非常困惑。所幸到现在已经能够解决问题&#xff0c;并且有一些心得&#xff0c;因此想要记录一下&#xff0c;也可以帮助有同样困惑的小伙伴。 首先我们来说一下接线问题&#xff0c;因为要利用到ch340&#x…
阅读更多...
使用DataGrip连接DM达梦数据库

使用DataGrip连接DM达梦数据库

前言 达梦数据库虽然提供了官方的数据库管理工具"DM管理工具"&#xff0c;但是该软件经常莫名卡顿&#xff0c;影响开发效率和心情。所以&#xff0c;本人一般使用DataGrip进行数据库操作。DataGrip是JetBrains公司开发的一款强大的数据库IDE&#xff0c;支持多种数…
阅读更多...
SpringBoot 打包所有依赖

SpringBoot 打包所有依赖

SpringBoot 项目打包的时候可以通过插件 spring-boot-maven-plugin 来 repackage 项目&#xff0c;使得打的包中包含所有依赖&#xff0c;可以直接运行。例如&#xff1a; <plugins><plugin><groupId>org.springframework.boot</groupId><artifact…
阅读更多...
Appium + mitmProxy 实现APP接口稳定性测试

Appium + mitmProxy 实现APP接口稳定性测试

随着 App 用户量的不断增长&#xff0c;任何小的问题都可能放大成严重的线上事故&#xff0c;为了避免对App造成损害的任何可能性&#xff0c;我们必须从各个方面去思考 App 的稳定性建设&#xff0c;尽可能减少任何潜在的威胁。 1.背景介绍 为了保障 App 的稳定性&#xff0c…
阅读更多...
Linux的Shell脚本详解

Linux的Shell脚本详解

本文目录 一、什么是 Shell 脚本文件 &#xff1f;二、编写Shell脚本1. 基本规则2. shell 变量&#xff08;1&#xff09;创建变量&#xff08;2&#xff09;引用变量&#xff08;3&#xff09;删除变量&#xff08;4&#xff09;从键盘读取变量&#xff08;5&#xff09;特殊变…
阅读更多...
【USB 3.2 Type-C】 端口实施挑战的集成解决方案 (补充一)

【USB 3.2 Type-C】 端口实施挑战的集成解决方案 (补充一)

USB 3.2 Type-C 端口集成 补充&#xff0c;上一篇感觉还有没理解到位的一部分&#xff1b; 一、只做正反插的通信&#xff0c;已经差不多够了&#xff0c;但是这并不是完整的TYPE-C,必须要补充上PD; 参考连接&#xff1a; TYPE-C PD浅谈&#xff08;一&#xff09;https://w…
阅读更多...
【MyBatis】深入解析MyBatis：高效操作数据库技术详解

【MyBatis】深入解析MyBatis：高效操作数据库技术详解

&#x1f493; 博客主页&#xff1a;从零开始的-CodeNinja之路 ⏩ 收录文章&#xff1a;【MyBatis】深入解析MyBatis&#xff1a;高效操作数据库技术详解 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 动态SQL1. \<if>标签2. \<trim&…
阅读更多...
易查分查询分组功能如何使用？

易查分查询分组功能如何使用？

期中考试马上要陆续开始&#xff0c;老师如果负责多个班级或年级&#xff0c;如何把同一级部的查询单独放到一个列表页呢&#xff1f; 易查分的查询分组功能就可实现&#xff0c;下面就来教大家如何使用此功能。 &#x1f4d6;案例&#xff1a;负责相关工作的老师&#xff0c;需…
阅读更多...
(代码结构3)项目redis key 管理

(代码结构3)项目redis key 管理

场景:项目中到处可见的key&#xff0c;没有统一管理&#xff0c;极其难维护。大佬同事实现了一个。 代码 如图,Redis.php 是对redis的二次封装&#xff0c;对redis key模块的强制校验&#xff0c;FillerKeyTrait.php 是对filler模块的key获取。主要原理是:对redis二次封装&…
阅读更多...
线性表—单链表实现

线性表—单链表实现

文章目录 链表介绍 单链表介绍 创建单链表节点 销毁 打印 查找 创建节点 增加数据 尾插 头插 指定位置插入 删除数据 尾删 头删 指定位置删除 整体代码 SListNode.h SListNode.c 链表介绍 链表是一种物理存储单元上非连续、非顺序的存储结构&#xff0c;由一…
阅读更多...
每日OJ题_贪心算法二③_力扣1005. K 次取反后最大化的数组和

每日OJ题_贪心算法二③_力扣1005. K 次取反后最大化的数组和

目录 力扣1005. K 次取反后最大化的数组和 解析代码 力扣1005. K 次取反后最大化的数组和 1005. K 次取反后最大化的数组和 难度 简单 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。…
阅读更多...
Python根据预设txt生成“你画我猜”题目PPT（素拓活动小工具）

Python根据预设txt生成“你画我猜”题目PPT（素拓活动小工具）

Python根据预设txt生成“你画我猜”题目PPT&#xff08;素拓活动小工具&#xff09; 场景来源 去年单位内部的一次素拓活动&#xff0c;分工负责策划设置其中的“你画我猜”环节&#xff0c;网络上搜集到题目文字后&#xff0c;想着如何快速做成对应一页一页的PPT。第一时间想…
阅读更多...
机器学习笔记-20

机器学习笔记-20

处理大数据集的算法 1. 随机梯度下降 我们之前一直在学的梯度下降算法也叫Batch梯度下降算法&#xff0c;前面的笔记有提过一嘴。以线性回归为例子&#xff0c;随机梯度下降也适用于其他使用Batch梯度下降算法求参数的学习算法&#xff0c;随机梯度下降是对Batch梯度下降算法的…
阅读更多...
[图解]被严重污染的领域专家

[图解]被严重污染的领域专家

0 00:00:00,740 --> 00:00:04,610 今天我们来说一下领域专家 1 00:00:05,480 --> 00:00:06,920 这个概念 2 00:00:08,460 --> 00:00:13,180 这个概念现在已经被严重污染了 3 00:00:16,080 --> 00:00:21,170 你看&#xff0c;这是来自一个领域驱动设计课程的资料…
阅读更多...
最新文章

Copyright @ 2022~2023

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