webpack该如何打包

news2024/10/7 12:20:18

1.我们先创建一个空的大文件夹

2.打开该文件夹的终端 输入npm init -y

2.1.打开该文件夹的终端

2.2在该终端运行 npm init -y

3.安装webpack

3.1打开webpack网址 点击“中文文档”

3.2点击“指南”在点击“起步”

3.3复制基本安装图片画线的代码

4.在一开始的文件夹下在创建一个名为src的文件夹

5.然后再在src内创建一个名为index.js的文件

6.打开名为packge.json的文件修改名叫scripts内属性名后的所有内容,修改为webpack

7. 然后在终端内执行npm run scripts内的属性名(该属性名可以修改)

8.如果修改了src内 index.js的名字就不会打包成功

9.如果想打包成功那就需要在一开始的文件夹下创建一个名为webpack.config.js文件(简化打包命令)

10.在文件内书写以下内容

//导出一个配置对象
//path是nodejs内置模块 帮助处理路径、
const path = require('path')
module.exports = {
    //入口 ————dirname当前模块的绝对路径
    entry:path.resolve(__dirname,'src/index.js'),//此的地址为src内自己定义的文件名
    //出口
    output:{
        //目录
        path:path.resolve(__dirname, 'dist'),
        //文件名
        filename:'index.js',//此地址为src内自己定义的文件
        //清空dist 输出最新的内容
        clean:true,
    },
}

11.在一次执行 npm run scripts内的属性名(该属性名可修改)

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

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

相关文章

营收增速持续放缓,博通CEO期待AI崛起救场 | 百能云芯

博通作为苹果等大型科技公司的芯片供应商,于周四发布了财报。尽管截至10月29日的第四季度营收增长了4%至93亿美元,符合市场预期,但增速已经降至2020年以来的最低水平。 由于企业客户和电信供应商在控制支出方面的谨慎态度,博通的销…

C 语言 变量

变量初始值 全局变量:初始值是 0 局部变量:初始值是 随机的 类型限定符 通常不需要显式使用 register 关键字来优化变量的存储和访问。 关键字 _Complex和_Imaginary分别用于表示复数和虚数(二者皆是数学概念) 变量的声明和定义 c…

【小白专用】MySQL创建数据库和创建数据表

1.在Windows开始搜索输入Mysql,并选择第一个打开。 2.输入安装时的密码 3.说明安装成功。 二、创建数据库 1. 连接 MySQL 输入 mysql -u root -p 命令,回车,然后输入 MySQL 的密码(不要忘记了密码),再回车,就连接上 MySQL 了。 …

Vue3选项式-基础部分篇

Vue3选项式风格-基础部分篇 简介模板语法文本插值原始HTMLAttribute 绑定使用 JavaScript 表达式调用函数全局组件调用内置指令动态参数注意事项 data()data()深度响应 methods有状态的methods(防抖) DOM更新时机计算属性class和style绑定条件渲染列表渲染数组变换侦听事件处理…

全网最新最全【Kali Linux】 渗透测试技术大全

利矛出击:Kali Linux 渗透测试大法 在网络攻防实践中,系统的防御措施可以称为“盾”,而渗透测试则是“矛”。二者同等重要,因为“矛”可以试探出“盾”有多坚固,并且及时发现问题,修补漏洞,提升…

k8s之镜像拉取时使用secret

k8s之secret使用 一、说明二、secret使用2.1 secret类型2.2 创建secret2.3 配置secret 一、说明 从公司搭建的网站镜像仓库,使用k8s部署服务时拉取镜像失败,显示未授权: 需要在拉取镜像时添加认证信息. 关于secret信息,参考: https://www.…

[英语学习][10][Word Power Made Easy]的精读与翻译优化

[序言] 下面这段话, 译者翻译没有太大问题, 就是某些单词上, 跟他理解得不一样. 另外还有一个关键的定语从句, 我认为译者理解不到位, 导致翻译不够通顺. [英文学习的目标] 提升自身的英语水平, 对日后编程技能的提升有很大帮助. 希望大家这次能学到东西, 同时加入我的社区讨…

修改正点原子综合实验的NES模拟器按键控制加横屏

​​​​​​​ 开发板:stm32f407探索者开发板V2 屏幕是4.3寸-800-480-MCU屏 手头没有V3开发板,只有V2,所以没法测试 所以只讲修改哪里,请自行修改 先改手柄部分,把手柄改成按键 找到左边的nes文件夹中的nes_mai…

matlab RGB三元组和十六进制的转换

matlab画柱状图改颜色的时候,用三元组的形式,范围是[0,1] 我们获得了十六进制 到网站转换为[0,255] https://c.runoob.com/front-end/55/ 然后将得到的值/255 输入matlab就可以了

VS2009和VS2022的错误列表可复制粘贴为表格

在VS2019或VS2022中,可看到如下错误列表: 如果复制这两行错误信息: 然后把它粘贴到word文件,就可以看到以下表格: 严重性 代码 说明 项目 文件 行 禁止显示状态 错误(活动) E0020 未定义标识符 "dd"…

Docker 部署 2FAuth 服务

拉取最新版本的 2FAuth 镜像: $ sudo docker pull 2fauth/2fauth:latest在本地预先创建好 2fauth 目录, 用于映射 2FAuth 容器内的 /2fauth 目录。 使用以下命令, 在 前台 运行 2FAuth 容器: $ sudo docker run -it --rm --name 2fauth -p 10085:8000/tcp -v /ho…

从简单到入门,一文掌握jvm底层知识文集。

🏆作者简介,普修罗双战士,一直追求不断学习和成长,在技术的道路上持续探索和实践。 🏆多年互联网行业从业经验,历任核心研发工程师,项目技术负责人。 🎉欢迎 👍点赞✍评论…

Qt基础-组件的添加、删除或更新

本文介绍如何在Qt中组件的添加、删除或更新。 概述 有时安装完qt后发现当前的组件需要进一步调整,这时就需要进一步操作安装的文件。 QT的组件管理软件并没有在开始菜单或者桌面添加快捷方式(5.9版本),也没有在代码编辑界面设置相关的选项,藏的比较深。 操作步骤 找到…

【工程实践】使用modelscope下载大模型文件

前言 Modelscope(魔搭社区)是阿里达摩院的一款开源模型平台,里面提供了很多的热门模型供使用体验,其中的模型文件可以通过git clone 快速下载。并且为模型提供了Notebook的快速开发体验,使用阿里云服务,不需…

arm平台编译so文件回顾

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、几个点二、回顾过程 1.上来就执行Makefile2.编译第三方开源库.a文件 2.1 build.sh脚本2.2 Makefile3.最终编译三、其它知识点总结 前言 提示:这…

一天一个设计模式---生成器模式

概念 生成器模式(Builder Pattern)是一种创建型设计模式,用于构建复杂对象。它允许您逐步构造一个对象,将构建过程与最终对象的表示分离开来。这种模式通常用于创建复杂的对象,这些对象可能有多个部分组成&#xff0c…

MongoDB的插入文档、更新文档语句

本文主要介绍MongoDB的插入文档、更新文档语句。 目录 MongoDB插入文档MongoDB更新文档 MongoDB插入文档 在MongoDB中,可以通过使用insertOne或insertMany方法向集合中插入文档。 insertOne方法可以插入一个文档,例如: db.collection.inse…

条码生成器与Zint使用

文章目录 目的条形码zint支持条形码种类下载编译qt pro配置code保存条形码目的 1: 了解条形码数据理论知识 2: 了解zint第三方库相关, 如何编译引用到项目中 条形码 条形码(Barcode)一维码 和二维码(QR code)都是用于存储信息的图形化表示方式,通常应用于商品标识、库…

LeetCode(52)最小栈【栈】【中等】

目录 1.题目2.答案3.提交结果截图 链接: 最小栈 1.题目 设计一个支持 push ,pop ,top 操作,并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推入堆栈。void…

【大数据分析】

系列文章目录 文章目录 系列文章目录前言一、数据分析框架二、数据分析方法1.数据清洗&数据探索2.数据清洗之异常值判别3.数据清洗之缺失值处理4.数据探索5.结构优化 三、大数据可视化1.大数据可视化概念1.1 定义1.2 数据可视化的意义 2.可视化类型和模型2.1 科学可视化2.2…