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.PIVERSION: `"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:yuanjincorporation:duyi`
})

ProvidePlugin

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

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

然后在我们任意源码中：

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

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

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

相关文章

Springboot+mybatis升级版（Postman测试）

Springboot+mybatis升级版（Postman测试）

一、项目结构 1.导入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apach…
阅读更多...
12_Scala_package

12_Scala_package

文章目录 Scaal面向对象编程1.回顾Java2.package可以多次声明3.设置作用域&#xff0c;设置上下级4.包可以当作对象使用5.import6.Scala用_取代Java *7.导入多个包8.屏蔽类9.类起别名10.import的规则11.有些包无需导入 Scaal面向对象编程 Scala是一门完全面向对象语言&#xf…
阅读更多...
Linux的权限管理

Linux的权限管理

文章目录 文件权限文件类型文件访问者的分类文件权限的类型 文件访问权限的设置目录的权限 文件权限 对于每个LInux文件&#xff0c;如果用ll指令查看的话&#xff0c;可以发现每个文件前面都有一串类似的字符&#xff1a; 这里总共有十个字符&#xff0c;其中第一个字符表示…
阅读更多...
QT httpServer多线程后台服务器的例子实现

QT httpServer多线程后台服务器的例子实现

1.需求 1.1 用户需要其他平台&#xff08;web端&#xff09;调用Qt平台的接口&#xff0c;获取想要的数据并实时显示在网页里&#xff0c;比如实时的温湿度&#xff0c;用户数据等 1.2 用户需要在其他平台&#xff08;web端&#xff09;调用Qt平台的接口&#xff0c;下发数据…
阅读更多...
贝叶斯统计实战：Python引领的现代数据分析之旅

贝叶斯统计实战：Python引领的现代数据分析之旅

贝叶斯统计这个名字取自长老会牧师兼业余数学家托马斯贝叶斯(Thomas Bayes&#xff0c;1702—1761)&#xff0c;他最先推导出了贝叶斯定理&#xff0c;该定理于其逝世后的1763年发表。但真正开发贝叶斯方法的第一人是Pierre-Simon Laplace(1749—1827)&#xff0c;因此将其称为…
阅读更多...
Copilot Venture Studio創始合伙人楊林苑確認出席“邊緣智能2024 - AI開發者峰會”

Copilot Venture Studio創始合伙人楊林苑確認出席“邊緣智能2024 - AI開發者峰會”

隨著AI技術的迅猛發展&#xff0c;全球正逐步進入邊緣計算智能化與分布式AI深度融合的新時代&#xff0c;共同書寫著分布式智能創新應用的壯麗篇章。邊緣智能&#xff0c;作為融合邊緣計算和智能技術的新興領域&#xff0c;正逐漸成為推動AI發展的關鍵力量。借助分布式和去中心…
阅读更多...
Messari 报告摘要 ：Covalent Network（CQT）2024 年第一季度表现

Messari 报告摘要 ：Covalent Network（CQT）2024 年第一季度表现

摘要&#xff1a; 尽管 CQT 代币流通供应量增加了 20%&#xff08;新增 1.04 亿枚 CQT&#xff09;&#xff0c;但 CQT 的质押百分比仅从 2023 年第一季度的 22% 增长到了 2024 年第一季度的 29%。 CQT 的市值季度环比增长了 28%&#xff0c;多次达到 2.75 亿美元&#xff0c…
阅读更多...
分享三款可以给pdf做批注的软件

分享三款可以给pdf做批注的软件

PDF文件不像Word一样可以直接编辑更改&#xff0c;想要在PDF文件上进行编辑批注需要用到一些专业的软件&#xff0c;我自己常用的有三款&#xff0c;全都是官方专业正版的软件&#xff0c;功能丰富强大&#xff0c;使用起来非常方便&#xff01; 1.edge浏览器 这个浏览器不仅可…
阅读更多...
van-cascader（vant2）异步加载的bug

van-cascader（vant2）异步加载的bug

问题描述&#xff1a;由于一次性返回所有的级联数据的话&#xff0c;数据量太大&#xff0c;接口响应时间太久&#xff0c;因此采用了异步加载的方案&#xff0c;看了vant的官方示例代码&#xff0c;照着改了下&#xff0c;很轻松地实现了功能。正当我感叹世界如此美好的时候&a…
阅读更多...
2.2 Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3-基础-Vue基本语法

2.2 Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3-基础-Vue基本语法

文本渲染指令 文本渲染指令-v-html与v-text Vue使用了基于HTML的模板语法&#xff0c;允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是 合法的HTML&#xff0c;所以能被遵循规范的浏览器和HTML解析器解析。 在前面&#xff0c;我们一直使用的是字符串插…
阅读更多...
Flutter - 折叠面板

Flutter - 折叠面板

demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新&#xff0c;请前往github查看最新代码 flutter 自定义折叠组件 支持三种类型和两种展示效果可自定义title和被折叠的内容 效果图 示例 import package:flutter/material.dart; import /jh_common/widge…
阅读更多...
springboot+websocket开发简单的在线群聊聊天web版本

springboot+websocket开发简单的在线群聊聊天web版本

springbootwebsocket开发简单的在线群聊聊天web版本&#xff01;近期在测试websocket插件的群聊功能。下面是一个简单的demo。分享给大家&#xff0c;亲测可以使用的。 1&#xff1a;首先是一个chat.html页面。代码如下&#xff1a; <!DOCTYPE html> <html lang"…
阅读更多...
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;特殊变…
阅读更多...
VMware安装ubuntun虚拟机使用桥接模式无法上网问题解决

VMware安装ubuntun虚拟机使用桥接模式无法上网问题解决

问题&#xff1a;最近准备使用VMware虚拟机搭建k8s集群服务&#xff0c;因为需要在同一个网段下&#xff0c;我使用桥接的方式&#xff0c;我发现主机在使用有线连接时虚拟机网络连接正常&#xff0c;但是使用无线网就显示连接不上网络。 解决方法 一、查看网络连接&#xff…
阅读更多...
MFC 列表控件删除实例（源码下载）

MFC 列表控件删除实例（源码下载）

1、本程序基于前期我的博客文章《MFC下拉菜单打钩图标存取实例&#xff08;源码下载) 》 2、程序功能选中列表控件某一项&#xff0c;删除按钮由禁止变为可用&#xff0c;点击删除按钮&#xff0c;选中的项将删除。 3、首先在主界面添加一个删除参数按钮。 4、在myDlg.cpp 文件…
阅读更多...
蓝桥杯练习系统（算法训练）ALGO-951 预备爷的悲剧

蓝桥杯练习系统（算法训练）ALGO-951 预备爷的悲剧

资源限制 内存限制&#xff1a;512.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 英语预备爷gzp是个逗(tu)比(hao)&#xff0c;为了在即将到来的英语的quiz中不挂科&#xff0c;gzp废寝忘食复习英语附录单词…
阅读更多...
基于缓存注解的时间戳令牌防重复提交设计

基于缓存注解的时间戳令牌防重复提交设计

文章目录 一&#xff0c;概述二&#xff0c;实现过程1、引入pom依赖2、定义缓存管理3、时间戳服务类4、模拟测试接口 三&#xff0c;测试过程1&#xff0c; 模拟批量获取2&#xff0c; 消费令牌 四&#xff0c;源码放送五&#xff0c;优化方向 一&#xff0c;概述 API接口由于…
阅读更多...
PHP源码_最新Ai对话系统网站源码 ChatGPT+搭建教程+前后端

PHP源码_最新Ai对话系统网站源码 ChatGPT+搭建教程+前后端

基于ChatGPT开发的一个人工智能技术驱动的自然语言处理工具&#xff0c;它能够通过学习和理解人类的语言来进行对话&#xff0c;还能根据聊天的上下文进行互动&#xff0c;真正像人类一样来聊天交流&#xff0c;甚至能完成撰写邮件、视频脚本、文案、翻译、代码&#xff0c;写论…
阅读更多...
C++Day6作业

C++Day6作业

1、模板实现顺序栈 #include <iostream>using namespace std;template <typename T> class Stack {T* S; //数组int size;//栈容量int top; //栈顶元素下标 public://有参构造Stack(int size):S(new T[size]),size(size),top(-1){}//初始化时直接将栈顶元素下标设…
阅读更多...
记一次古董级netapp存储更换故障硬盘全过程

记一次古董级netapp存储更换故障硬盘全过程

1、案例背景 记一次某医院PACS存储NetApp FAS2554更换故障硬盘的过程。 这个netapp设备以前从未调试过&#xff0c;据客户说该设备上线也有快9年了&#xff0c;头一次故障硬盘。因为己经过保了&#xff0c;客户只是采购的硬盘&#xff0c;我这来免费服务了。。。 netapp调试…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023