当前位置：首页 > news >正文

webpack配置方式

news 来源：原创 2025/4/18 13:00:55

1. 基本配置文件 (`webpack.config.js`)（导出一个对象）

最常见的方式是通过 webpack.config.js 文件来配置 Webpack，导出一个对象。你可以在这个文件中导出一个配置对象，指定入口、输出、加载器、插件等。

// webpack.config.js
module.exports = {entry: './src/index.js',  // 入口文件output: {filename: 'bundle.js',  // 输出文件名path: __dirname + '/dist'  // 输出目录},module: {rules: [{test: /\.js$/,  // 匹配所有 .js 文件exclude: /node_modules/,use: 'babel-loader',  // 使用 Babel 转译},],},
};

3. 通过 JavaScript 动态配置（导出一个函数）

Webpack 配置文件本身是一个 Node.js 模块，因此你可以使用 Node.js 的功能来动态生成配置。例如，可以根据环境变量或命令行参数来调整 Webpack 配置。

// webpack.config.js
const path = require('path');module.exports = (env, argv) => {return {entry: './src/index.js',output: {filename: argv.mode === 'production' ? 'bundle.min.js' : 'bundle.js',path: path.resolve(__dirname, 'dist'),},};
};

在这个例子中，根据 argv.mode （development 或 production）来决定输出的文件名。

4. 多配置文件（Multi-Configuration）（导出一个数组）

Webpack 允许你使用多个配置文件进行构建，通常用于不同的构建目标（如开发模式和生产模式）或支持多个入口文件。你可以将多个配置文件合并到一起，Webpack 会依次处理这些配置。

// webpack.config.dev.js
module.exports = {mode: 'development',entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist',},
};// webpack.config.prod.js
module.exports = {mode: 'production',entry: './src/index.js',output: {filename: 'bundle.min.js',path: __dirname + '/dist',},
};// webpack.config.js
const devConfig = require('./webpack.config.dev');
const prodConfig = require('./webpack.config.prod');module.exports = [devConfig, prodConfig];  // Webpack 会处理两个配置

5. 通过 `webpack-merge` 合并配置

如果你的项目有多个配置文件，可以使用 webpack-merge 来合并公共配置和特定环境（开发/生产）下的配置。这种方法通常用于减少配置重复。

npm install webpack-merge --save-dev

// webpack.common.js
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist',},
};// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');module.exports = merge(common, {mode: 'development',devtool: 'inline-source-map',
});// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');module.exports = merge(common, {mode: 'production',optimization: {minimize: true,},
});

6. 运行webpack配置文件

6.1、通过 `webpack-cli` 配置

当你使用 webpack-cli 时，可以通过命令行进行一些配置。比如，使用 --config 选项指定一个不同的配置文件。

webpack --config webpack.config.prod.js

6.2、通过 `package.json` 配置

对于简单的项目，Webpack 配置项有时也可以直接在 package.json 文件的 scripts 字段中进行设置。这对于不需要复杂配置的简单项目特别方便。

{"scripts": {"build": "webpack --mode production","dev": "webpack serve --mode development"}
}

6.3、通过 `webpack-dev-server` 配置

webpack-dev-server 提供了一个开发服务器，并允许在配置文件中进行设置。你可以通过 devServer 配置项来配置 Webpack Dev Server 的行为，如热加载、代理等。

// webpack.config.js
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist',},devServer: {contentBase: './dist',  // 设置静态文件目录hot: true,  // 启用热模块替换},
};

总结

Webpack 配置文件的配置方式主要包括：

基本的 webpack.config.js 文件。
命令行参数：通过命令行直接传递配置。
动态配置：通过 Node.js 动态生成配置。
多配置文件：针对不同环境使用不同配置文件。
webpack-merge 合并配置：合并通用配置和特定环境配置。
package.json 中的配置：在 package.json 的 scripts 字段中配置。
webpack-dev-server 配置：用于开发服务器的配置。

webpack配置方式

1. 基本配置文件 (webpack.config.js)（导出一个对象） 最常见的方式是通过 webpack.config.js 文件来配置 Webpack，导出一个对象。你可以在这个文件中导出一个配置对象，指定入口、输出、加载器、插件等。 // webpack.config.js m…...

编程日记 2025/4/18 13:00:55

123，【7】 buuctf web [极客大挑战 2019]Secret File

进入靶场太熟悉了，有种回家的感觉查看源代码，发现一个紫色文件点下看看点secret 信息被隐藏了要么源代码，要么抓包源代码没有，抓包自己点击时只能看到1和3处的文件，点击1后直接跳转3，根本不出…...

编程日记 2025/4/14 12:37:59

OSPF基础（2）：数据包详解

OSPF数据包(可抓包) OSPF报文直接封装在IP报文中，协议号89 头部数据包内容： 版本(Version):对于OSPFv2，该字段值恒为2(使用在IPV4中)；对于OSPFv3，该字段值恒为3(使用在IPV6中)。类型(Message Type):该OSPF报文的类型。…...

编程日记 2025/4/18 21:12:33

Vue 入门到实战八

第8章组合API与响应性目录 8.1 响应性 8.1.1 什么是响应性 8.1.2 响应性原理 8.2 为什么使用组合API 8.3 setup组件选项 8.3.1 setup函数的参数 8.3.2 setup函数的返回值 8.3.3 使用ref创建响应式引用 8.3.4 setup内部调用生命周期钩子函数 8.4 提供/注入 8.4.1 …...

编程日记 2025/4/18 21:16:12

【学习总结|DAY036】Vue工程化+ElementPlus

引言在前端开发领域，Vue 作为一款流行的 JavaScript 框架，结合 ElementPlus 组件库，为开发者提供了强大的构建用户界面的能力。本文将结合学习内容，详细介绍 Vue 工程化开发流程以及 ElementPlus 的使用，助力开发者快…...

编程日记 2025/4/18 21:14:24

HTML之CSS三大选择器

HTML之CSS三大选择器 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><st…...

编程日记 2025/4/18 21:15:48

理解链接：加载二进制动态库

理解链接：加载二进制动态库文章目录理解链接：加载二进制动态库前情提要基本方式1 - 显式连接 dlopen基本方式 2 - 隐式链接 compile link ld衍生方式 3 - 弱链接 weak linking衍生方式 4 - dlmopen 加载到独立命名空间调试所有符号补充知识1. 动态库…...

编程日记 2025/4/18 21:13:15

ASP.NET Core中Filter与Middleware的区别

中间件是ASP.NET Core这个基础提供的功能，而Filter是ASP.NET Core MVC中提供的功能。ASP.NET Core MVC是由MVC中间件提供的框架，而Filter属于MVC中间件提供的功能。区别中间件可以处理所有的请求，而Filter只能处理对控制器的请求&#x…...

编程日记 2025/4/18 21:14:02

《语义捕捉全解析：从“我爱自然语言处理”到嵌入向量的全过程》

首先讲在前面，介绍一些背景 RAG（Retrieval-Augmented Generation，检索增强生成） 是一种结合了信息检索与语言生成模型的技术，通过从外部知识库中检索相关信息，并将其作为提示输入给大型语言模型&#xff…...

编程日记 2025/4/18 21:15:03

大规模多准则决策模型构建详细方案

第二阶段：大规模多准则决策模型构建详细方案目标基于消费者群体偏好和个体交互数据，构建动态、可扩展的多准则决策模型，实现实时个性化产品排序。一、技术架构设计 1. 系统架构图 [用户交互层] → (React前端) ↓ [API服务层] → (…...

编程日记 2025/4/16 2:29:53

Rust 语言：变革关键任务软件的新力量

软件无处不在，从手表、烤箱、汽车，甚至可能是牙刷中都有它的身影。更重要的是，软件控制着关乎生死的系统，如飞机、医疗设备、电网系统和银行基础设施等。如果软件工程师稍有疏忽，软件缺陷和漏洞可能导致数十亿美元的损…...

编程日记 2025/4/15 7:06:12

Linux特权组全解析：识别GID带来的权限提升风险

组ID（Group ID，简称 GID）是Linux系统中用来标识不同用户组的唯一数字标识符。每个用户组都有一个对应的 GID，通过 GID，系统能够区分并管理不同的用户组。在Linux系统中，系统用户和组的配置文件通常包括以…...

编程日记 2025/4/19 5:46:32

安卓/ios脚本开发按键精灵经验小分享

1. 程序的切换我们经常碰到这样的需求：打开最近的应用列表，选取我们想要的程序。但是每个手机为了自己的风格，样式都有区别，甚至连列表的滑动方向都不一样，我们很难通过模拟操作来识别点击，那么我们做的只…...

编程日记 2025/4/18 13:36:31

机器学习在癌症分子亚型分类中的应用

学习笔记：机器学习在癌症分子亚型分类中的应用——Cancer Cell 研究解析 1. 文章基本信息标题：Classification of non-TCGA cancer samples to TCGA molecular subtypes using machine learning发表期刊：Cancer Cell发表时间：20…...

编程日记 2025/4/17 6:09:25

DeepSeek本地部署保姆级教程

由于DeepSeek近期遭受攻击，又加上用户访问量较大，导致总是服务不可用，让人十分窝火。有没有好的解决办法呢？答案是自己在电脑端部署一套，这样就不用和别人抢着用了。另外本地部署的好处还有保护隐私与减少延迟。如果…...

编程日记 2025/4/18 7:02:31

无惧户外复杂环境，安科瑞 AKH-0.66/K-HW 开口式互感器准确测流

安科瑞吕梦怡 18706162527 1.产品特点 AKH-0.66/K-HW 系列互感器具有防水功能，可在户外使用，切面端口采用橡胶垫环绕可有效阻止雨水进入。互感器采用注塑技术，将互感器线圈直接在模具中进行注塑，同时二次侧引线采用防水端子…...

编程日记 2025/4/16 19:04:13

玩转Docker | 使用Docker部署httpd服务

玩转Docker | 使用Docker部署httpd服务前言一、准备工作环境确认检查操作系统准备网站目录和配置文件二、拉取httpd镜像三、运行httpd容器运行容器命令检查容器状态四、验证httpd服务浏览器访问测试错误排查五、容器管理与维护查看容器状态停止和启动容器更新网站内容和配置六…...

编程日记 2025/4/17 9:39:38

MacOS 安装NVM

MacOS 安装NVM 方法一：使用Homebrew安装nvm 打开终端（Terminal），输入以下命令安装Homebrew： /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"安装nvm…...

编程日记 2025/4/19 5:55:24

Qt 数据库SQLite 使用【01】基本功能

1.开发背景 Qt 开发过程中难免需要存储数据，可以选择保存到本地文件，但是查找比较麻烦，所以就有了数据库，主要是方便查找数据，增删改查等操作，而 SqLite 属于数据库中轻量级的存在，适合本地数据…...

编程日记 2025/4/14 1:57:02

http状态码：请说说 503 Service Unavailable（服务不可用）的原因以及排查问题的思路

503 Service Unavailable（服务不可用） 是一种HTTP状态码，表示服务器当前无法处理请求，通常是由于临时性原因导致服务中断。以下是它的常见原因和排查思路： 一、503错误的常见原因 1. 服务器过载场景：服务…...

编程日记 2025/4/14 17:54:21

58页PPT学习华为面向业务价值的数据治理实践

目录 1. 正文解读... 1 2. 华为数据质量管控的质量度量框架是怎样的？... 2 3. 如何在企业中实施类似华为的数据质量管控...

编程日记 2025/4/19 4:31:46

电脑开机提示按f1原因分析及终极解决方法来了

经常有网友问到一个问题，我电脑开机后提示按f1怎么解决？不管理是台式电脑，还是笔记本，都有可能会遇到开机需要按F1，才能进入系统的问题，引起这个问题的原因比较多，今天小编在这里给大家列举了比…...

编程日记 2025/4/19 6:16:26

DeepSeek模型构建与训练

在完成数据预处理之后，下一步就是构建和训练深度学习模型。DeepSeek提供了简洁而强大的API，使得模型构建和训练变得非常直观。无论是简单的全连接网络，还是复杂的卷积神经网络（CNN）或循环神经网络（RNN），DeepSeek都能轻松应对。本文将带你一步步构建一个深度学习模型，并…...

编程日记 2025/4/16 15:51:05

ProxySQL实现mysql8主从同步读写分离

一、ProxySQL基本介绍 ProxySQL是 MySQL 的高性能、高可用性、协议感知代理。简单介绍下ProxySQL及其功能和配置，主要包括： 最基本的读/写分离，且方式有多种；可定制基于用户、基于schema、基于语句的规则对SQL语句进行路由&…...

编程日记 2025/4/17 7:39:41

Day38-【13003】短文，树的基本概念，用广义表表示树

文章目录第五章树与二叉树第一节树的基本概念用广义表，也就是集合表示发，来表示树第五章树与二叉树第一节树的基本概念因为树是一种层次结构，所以它是一种非线性结构，在实际应用中具有广泛的用途。日常生活中&#xff…...

编程日记 2025/4/19 5:06:42

LabVIEW与PLC交互

一、写法写命令立即读出写命令后立即读出，在同一时间不能有多个地方写入，因此需要在整个写入后读出过程加锁项目中会存在多个循环并行执行该VI，轮询PLC指令在锁内耗时，就是TCP读写的实际耗时为5-8ms，在主VI六个…...

编程日记 2025/4/17 18:03:48

MySQL第四次作业

新建数据库新建表 student表 2.course表 3.sc表修改Student 表中年龄(sage)字段属性，数据类型由int 改变为smallint alter table student modify sage smallint; 为Course表中Cno 课程号字段设置索引，并查看索引 create index index_cno on cou…...

编程日记 2025/4/16 0:41:44

栈和队列的实现（C语言）

1：栈 1：概念和结构栈：一种特殊的线性表，其只运行在固定的一段进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶，另一端称为栈底。栈中的数据元素遵守先进后出的原则。压栈：在栈里面插入…...

编程日记 2025/4/19 6:01:16

（四）QT——QMainWindow——界面菜单设计

目录前言 QMainWindow 结构菜单栏工具栏状态栏停靠部件核心部件 UI 文件创建窗口总结前言 QMainWindow 是 Qt 框架中的一个类，主要用于创建桌面应用程序的主窗口。它提供了一个标准的窗口布局，包含菜单、工具栏、状态栏和中心小部件等功…...

编程日记 2025/4/16 0:34:45

MySQL InnoDB引擎脏读、不可重复读和幻读

在 MySQL 的 InnoDB 存储引擎中，脏读、不可重复读和幻读是并发事务操作时可能出现的数据不一致问题，不同的事务隔离级别对这些问题有不同的处理方式。 1、脏读（Dirty Read） 定义：一个尚未提交的数据变更的事务&#…...

编程日记 2025/4/17 4:23:36

初阶数据结构：树---堆

目录一、树的概念二、树的构成 （一）、树的基本组成成分 （二）、树的实现方法三、树的特殊结构------二叉树 （一）、二叉树的概念 （二）、二叉树的性质 （三&#…...

编程日记 2025/4/18 14:36:21

判断192.168.1.0/24网络中，当前在线的ip有哪些

需求：判断192.168.1.0/24网络中，当前在线的ip有哪些，并编写脚本打印出来。 [rootopenEuler ~]# cat 1.sh #!/bin/bash for ip in $(seq 1 254); do ping -c 1 -W 1 "192.168.1.$ip" > /dev/null 2>&1 if [ $? …...

编程日记 2025/4/17 17:33:24

初始JavaEE篇 —— Spring Web MVC入门（上）

找往期文章包括但不限于本期文章中不懂的知识点： 个人主页：我要学编程程(ಥ_ಥ)-CSDN博客所属专栏：JavaEE 目录 RequestMappingg 注解介绍 Postman的介绍与使用 PostMapping 与 GetMapping 注解构造并接收请求接收简单参数接收对象…...

编程日记 2025/4/18 14:38:35

STM32的HAL库开发-通用定时器输入捕获实验

一、通用定时器输入捕获部分框图介绍 1、捕获/比较通道的输入部分(通道1) 首先设置 TIM_CCMR1的CC1S[1:0]位，设置成01，那么IC1来自于TI1，也就是说连接到TI1FP1上边。设置成10，那个IC1来自于TI2，连接到TI2FP1上。设置成…...

编程日记 2025/4/18 8:30:56

nodejs：express + js-mdict 网页查询英汉词典，能播放.spx 声音

向 DeepSeek R1 提问： 我想写一个Web 前端网页，后台用 nodejs js-mdict , 实现在线查询英语单词，并能播放.spx 声音文件 1. 项目结构首先，创建一个项目目录，结构如下： mydict-app/ ├── public/ │ …...

编程日记 2025/4/17 17:32:28

【蓝桥杯嵌入式】5_PWM

全部代码网盘自取链接：https://pan.baidu.com/s/1PX2NCQxnADxYBQx5CsOgPA?pwd3ii2 提取码：3ii2 1、PWM占空比可调以往届的赛题举例将PA6、PA7分别设置为TIM16_CH1和TIM17_CH1 打开TIM16和TIM17，并设置PWM输出模式及其频率设置占空比初…...

编程日记 2025/4/18 14:38:04

ESM-IF1：从AF2的预测结构中学习逆折叠

作者研究了从蛋白质骨干原子坐标预测蛋白质序列的问题。迄今为止，机器学习解决此问题的方法一直受限于可用的实验测定蛋白质结构的数量。作者使用AlphaFold2为1200万个蛋白质序列预测的结构，从而将训练数据扩充了近三个数量级。相比现有方法，…...

编程日记 2025/4/18 7:23:56

kafka服务端之控制器

文章目录概述控制器的选举与故障恢复控制器的选举故障恢复优雅关闭分区leader的选举概述在Kafka集群中会有一个或多个broker，其中有一个broker会被选举为控制器（Kafka Controler），它负责管理整个集群中所有分区和副本的状态。…...

编程日记 2025/4/18 14:36:51

Redis双写一致性（数据库与redis数据一致性）

一什么是双写一致性？ 当修改了数据库（MySQL）中的数据，也要同时更新缓存（redis）中的数据，缓存中的数据要和数据库中的数据保持一致双写一致性，根据业务对时间上的要求，…...

编程日记 2025/4/18 14:34:10

feign Api接口中注解问题：not annotated with HTTP method type (ex. GET, POST)

Bug Description 在调用Feign api时，出现如下异常： java.lang.IllegalStateException: Method PayFeignSentinelApi#getPayByOrderNo(String) not annotated with HTTPReproduciton Steps 1.启动nacos-pay-provider服务，并启动nacos-pay-c…...

编程日记 2025/4/18 14:35:11

开源2+1链动模式AI智能名片S2B2C商城小程序：突破流量与创意困境的新路径

摘要：本文深入剖析当前互联网行业中流量集中于巨头以及创意边际效应递减的困境，并探讨开源21链动模式AI智能名片S2B2C商城小程序在应对这些困境时所展现的独特优势与应用策略。通过对行业现状的分析以及该小程序功能特点的研究，旨在为企业在艰…...

编程日记 2025/4/19 6:32:39

python编程-内置函数compile()，exec()，complex()，eval()详解

1. compile() 函数 ‌用途‌：将一个字符串源代码编译为字节码对象，这样可以直接被Python解释器执行，或者通过exec()或eval()函数来执行。 ‌参数‌： source：一个字符串或AST（抽象语法树）对象&am…...

编程日记 2025/4/18 12:46:14

websocket自动重连封装

websocket自动重连封装前端代码封装 import { ref, onUnmounted } from vue;interface WebSocketOptions {url: string;protocols?: string | string[];reconnectTimeout?: number; }class WebSocketService {private ws: WebSocket | null null;private callbacks: { [k…...

编程日记 2025/4/18 12:48:23

解锁C/C++：链表数据结构的奇幻之旅

目录一、引言二、链表基础概念2.1 链表是什么2.2 链表的类型三、C 语言实现链表3.1 定义链表节点3.2 创建链表3.3 链表操作3.3.1 遍历链表3.3.2 插入节点3.3.3 删除节点3.3.4 查找节点3.4 完整示例代码四、C++ 实现链表4.1 定义链表节点类4.2 创建链表4.3 链表操作4.3.1 遍历链…...

编程日记 2025/4/18 12:47:13

x64、aarch64、arm与RISC-V64：详解四种处理器架构

x64、aarch64、arm与RISC-V64：详解四种处理器架构 x64架构aarch64架构ARM架构RISC-V64架构总结与展望在计算机科学领域，处理器架构是构建计算机系统的基石，它决定了计算机如何执行指令、管理内存和处理数据。x64、aarch64、arm与RISC-V64是当前主流的四种处理器架构，它们在…...

编程日记 2025/4/18 12:47:50

nuxt3中报错： `setInterval` should not be used on the server.

那是因为在后端渲染没有浏览器的执行环境，一些浏览器环境提供的对象和方法都无法使用，代码判断下就行。 if (import.meta.client) {setInterval(() > {}, 1000) }Import meta Nuxt API...

编程日记 2025/4/18 12:48:06

python编程-集合内置函数和filter(),集合常见操作

在Python中，列表、集合、字典是三种常用的数据结构，它们各自拥有一些内置函数，用于执行各种操作。一、列表的常用内置函数 #‌1、append(obj)‌: 在列表末尾添加新的对象。list_a [1, 2, 3] list_a.append(4) print(list_a) # 输出: [1,…...

编程日记 2025/4/18 12:46:52

三极管的截止、放大、饱和区

三极管的几个区，都有什么用： 截止区：晶体管不导通，用于开关电路的“关”状态。放大区：晶体管用于信号放大，集电极电流与基极电流成正比。饱和区：晶体管完全导通，用于开关电路的“…...

编程日记 2025/4/18 12:47:31

python爬虫--简单登录

1，使用flask框架搭建一个简易网站后端代码app.py from flask import Flask, render_template, request, redirect, url_for, sessionapp Flask(__name__) app.secret_key 123456789 # 用于加密会话数据# 模拟用户数据库 users {user1: {password: password1}…...

编程日记 2025/4/18 12:46:33

苹果公司宣布正式开源 Xcode 引擎 Swift Build145

2025 年 2 月 1 日，苹果公司宣布正式开源 Xcode 引擎 Swift Build145。 Swift 是苹果公司于 2014 年推出的一种开源编程语言，用于开发 iOS、iPadOS、macOS、watchOS 和 tvOS 等平台的应用程序。发展历程诞生：2014 年，苹果在全球…...

编程日记 2025/4/17 10:03:44

1. 基本配置文件 (webpack.config.js)（导出一个对象）

3. 通过 JavaScript 动态配置（导出一个函数）

4. 多配置文件（Multi-Configuration）（导出一个数组）

5. 通过 webpack-merge 合并配置

6. 运行webpack配置文件

6.1、通过 webpack-cli 配置

6.2、通过 package.json 配置

6.3、通过 webpack-dev-server 配置

总结

相关文章：

1. 基本配置文件 (`webpack.config.js`)（导出一个对象）

5. 通过 `webpack-merge` 合并配置

6.1、通过 `webpack-cli` 配置

6.2、通过 `package.json` 配置

6.3、通过 `webpack-dev-server` 配置