添加webpack.config.js配置

news2025/5/25 15:11:45

webpack 命令默认会去根目录查找webpack.config.js配置文件,如果没有,则会使用webpack默认的零配置打包规则进行打包,默认的零配置打包规则主要包括下面这几点:

1. 默认入口文件:Webpack 默认会将 ./src/index.js 作为入口文件进行打包。

2. 默认输出文件:Webpack 默认会将打包后的文件输出到 ./dist/main.js。

3. 默认加载器:Webpack 默认只能处理 JavaScript 和 JSON 文件,对于其他类型的文件(如 CSS、图片等),需要使用对应的加载器(loader)进行处理。

4. 默认插件:Webpack 默认没有启用任何插件,如果需要使用插件(如进行代码压缩、生成 source map 等),需要手动配置。

5. 默认模式:Webpack 默认的模式是 production,在这种模式下,Webpack 会自动进行代码压缩和优化。如果需要在开发环境下使用 Webpack,可以将模式设置为 development。

所以,在前面的博客中,我们初始化了一个空的项目,当执行webpack打包时,需要先手动在src目录下创建一个index.js文件,这样在执行npm run build后,在dist的目录下生成了一个main.js文件,这个也验证了上面零配置打包规则的第1点和第2点。

在根目录下,新建webpack.config.js文件,编辑如下内容:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
 
        filename: 'bundle.js'
    }
}

上述配置,指定了入口文件,同时指定了dist文件夹下输出的文件名为bundle.js,执行npm run build,会看到在dist文件下多了一个bundle.js文件

因为我们之前在没有新增webpack.config.js文件之前,执行过npm run build,所以dist目录下也存在之前按照零配置规则生成的main.js文件,我们需要在webpack每次打包前,都清空下dist,再生成打包后的文件,只需要在output的配置中新增一行clean: true即可

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        clean: true,
    }
}

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

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

相关文章

“壕无人性”的沙特也要买量子计算机!巨头沙特阿美的合作方竟是它?

内容来源:量子前哨(ID:Qforepost) 文丨浪味仙 排版丨沛贤 深度好文:1200字丨5分钟阅读 摘要:石油巨头沙特阿美与 Pasqal 开启合作,计划于 2025 年部署一台 200 量子比特的量子计算机&#xff…

开源大模型与闭源大模型:技术哲学的较量

目录 前言一、 开源大模型的优势1. 社区支持与合作1.1 全球协作网络1.2 快速迭代与创新1.3 共享最佳实践 2. 透明性与可信赖性2.1 审计与验证2.2 减少偏见与错误2.3 安全性提升 3. 低成本与易访问性3.1 降低研发成本3.2 易于定制化3.3 教育资源丰富 4. 促进标准化5. 推动技术进…

【qt】QDockWidget 浮动窗口

QDockWidget 浮动窗口 一.QDockWidget 的用法 前言:很简单,放心食用 一.QDockWidget 的用法 太简单了,直接来吧! 直接做个小项目来了解QDockWidget 的用法 目标效果图: 开始拖放: 开始布局: …

Jenkins pipeline发布前端项目

说明:第一次使用jenkins生成pipeline片段,做个记录... 1.全局工具配置添加自定义node版本 2.系统管理添加前端应用部署服务器 2.1 点击高级选择账号密码验证方式,添加服务器的用户和密码 3.系统管理--凭据--系统--全局凭据--添加自己的git凭据…

R语言数据分析案例-巴西固体燃料排放量预测与分析

1 背景 自18世纪中叶以来,由于快速城市化、人口增长和技术发展,导致一氧化二氮(N2O)、 甲烷(CH4)和二氧化碳(CO 2)等温室气体浓度急剧上升,引发了全球变暖、海平面上 升…

[Cocos Creator 3.5赛车游戏]第5节 为汽车节点挂载自定义脚本

在前面的章节中您已经学会了如何创建一个汽车节点,这一章我们将会学习如何通过挂载自定义节点的方式让小车变得可控制,所以通过这一章的学习后,您将实现一个效果:开始运行后,小车每隔一帧就延y轴向上移动一段距离。在这…

vs无法打开或包括文件”QTxxx“

vs创建项目时默认引入core、gui、和widgets等模块,在需要网络通讯或者图表等开发时需要添加相应模块。 点击扩展 -> QT VS Tools -> QT Project Setting->Qt Modules,添加相应模块即可

OpenAI、微软、智谱AI 等全球 16 家公司共同签署前沿人工智能安全承诺

人工智能(AI)的安全问题,正以前所未有的关注度在全球范围内被讨论。 日前,OpenAI 联合创始人、首席科学家 Ilya Sutskever 与 OpenAI 超级对齐团队共同领导人 Jan Leike 相继离开 OpenAI,Leike 甚至在 X 发布了一系列…

Java中Spring MVC 来如何接收表单数据

目录 一、Java语言介绍 二、Spring MVC 框架介绍 三、什么是表单 四、Spring MVC 来如何接收表单数据 一、Java语言介绍 Java是一种广泛使用的面向对象的编程语言,由Sun Microsystems公司的James Gosling等人开发。它最初于1995年发布,被设计为具有…

以人为本的人工智能:李飞飞谈AI

随着人工智能(AI)技术的迅猛发展,关于AI的讨论越来越多,特别是围绕其可能带来的威胁。有人担心高效的AI会夺走我们的工作,甚至不可控的AI最终会统治人类。对此,斯坦福大学计算机科学系教授李飞飞提出了不同…

【bug解决】文件chunk分包上传中断报错

文章目录 报错信息原因分析解决方案 一天闲着无聊,打开项目线上报错日志信息,突然发现一段很奇怪的报错:MultipartException,主观认为导致这个问题的原因无非就几个原因: 文件上传格式大小超出限制,在配置文…

Llama 3超级课堂作业笔记

文章目录 基础作业完成 Llama 3 Web Demo 部署环境配置下载模型Web Demo 部署对话截图 使用 XTuner 完成小助手认知微调Web Demo 部署自我认知训练数据集准备训练模型推理验证 使用 LMDeploy 成功部署 Llama 3 模型环境,模型准备LMDeploy CLI chatLMDeploy模型量化(…

访问列表元素

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中,如果想将列表的内容输出也比较简单,可以直接使用print()函数即可。例如,创建一个名称为untitle的列表…

python-docx 在word中指定位置插入图片或表格

docx库add_picture()方法不支持对图片位置的设置 1、新建一个1行3列的表格,在中间的一列中插入图片 from docx import Document from docx.shared import Pt from docx.oxml.shared import OxmlElement from docx.enum.text import WD_ALIGN_PARAGRAPHdef add_cen…

谷歌开源项目BERT源码解读与应用实例

数据及代码见文末 基于BERT的中文情感分析实战:基于BERT的中文情感分析实战-CSDN博客 基于BERT的中文命名实体识别识别实战:基于BERT的中文命名实体识别识别实战-CSDN博客 1.项目配置文件 GLUE/BERT_BASE_DIR是项目的预训练权重,预训练权重主要包含3个部分:参数配置文件…

LangChain - 构建知识图谱提升RAG

本文翻译整理自:Enhancing RAG-based application accuracy by constructing and leveraging knowledge graphs https://blog.langchain.dev/enhancing-rag-based-applications-accuracy-by-constructing-and-leveraging-knowledge-graphs/ code : https://github.c…

在gitlab CICD中 小试 hooks:pre_get_sources_script 功能

参考链接: hooks:pre_get_sources_script 功能简介 hooks:pre_get_sources_script 是gitlab CICD中的一个功能,该功能可以指定在克隆 Git 仓库和任何子模块之前要在执行器上执行的某些命令。例如: 调整 Git 配置导出跟踪变量 下来简单给…

修改默认时区,默认语言,默认国家

确认时区,语言,国家 build/make/target/product/languages_default.mkframeworks/base/packages/SettingsLib/res/xml/timezones.xml设备mk中添加相关内容 PRODUCT_PROPERTY_OVERRIDES \persist.sys.timezoneEurope/AmsterdamPRODUCT_PROPERTY_OVERRI…

Centos7离线安装RabbitMQ教程

目录 安装包准备开始安装1. 创建目录2. 上传文件3. 安装erlang语言4. 安装socat5. 安装rabbitmq6. 启动、停止rabbitmq7. 设置开机启动8. 开启web界面管理工具9. 开启防火墙(root)10. 访问页面11. 附录 安装包准备 (1)准备RabbitMQ的安装包(…

adb卸载系统垃圾应用

//获取包名 输入如下代码,然后在打开和关闭要获取包名的app就会打印出该app的包名 adb shell am monitor //卸载系统应用 -k会保留用户数据,不包含-k则不会保留用户数据 adb shell pm uninstall -k --user 0 包名 (包名一般为:c…