Webpack5新手入门简单配置

1.初始化项目

yarn init -y

 

 2.安装依赖

yarn add -D webpack@5.75.0 webpack-cli@5.0.0

3.新建index.js

说明:写入下面的一句话

console.log("hello webpack");

4.执行命令

说明:如果没有安装webpack脚手架就不能执行yarn webpack(webpack-cli)

yarn webpack 

 5. 打包后生成dist文件夹

6.修改package.json

说明:为yarn webpack起别名

{"devDependencies": {"webpack": "5.75.0","webpack-cli": "5.0.0"},"scripts": {"build":"webpack"}
}

 7.打包

 yarn build

 8.新建webpack.config.js

说明:注释写在了代码里面了

const path=require("path")
module.exports={mode:"production" , //设置打包模式,生产模式也就是项目上线配置,development模式是开发着模式entry:"./src/index.js",   //入口文件  默认 ./src/index.js,多个打包文件用数组包裹,也可以对象写(可以指定打包后的文件)output:{// 配置打包后的地址path:path.resolve(__dirname,"dist"), // __dirname表示表示当前模块文件夹的路径  必须要绝对路径filename:"main.js" ,  //打包后文件名clear:true,   //自动清理打包目录  filename: '[name].js', [name]表示任意文件名}
}

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

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

相关文章

47.Linux学习day01 基础命令详解1(很全面)

目录 一、Linux和Windows的区别 二、Linux系统目录结构 常见目录说明 三、Linux常见的基础命令 1.pwd 2.cd 3.ls 4.man 5. touch 6.mkdir 7. rmdir 今天正式学习了linux的一些基础操作和基础知识,以及linux和windows的区别。 一、Linux和Windows的区…

Your local changes to the following files would be overwritten by checkout

Git 之 Your local changes to the following files would be overwritten by checkout 今天在切换分支时遇到了这样一个问题: 首先翻译下: Your local changes to the following files would be overwritten by checkout 大致意思就是: 当…

HCIP---OSPF的MGRE实验

一、实验要求: 1、R6为ISP只能配置ip地址,R1-5的环回为私有网段 2、R1/4/5为全连的MGRE结构,R1/2/3为星型的拓扑结构,R1为中心站点 3、所有私有网段可以互相通讯,私有网段使用OSPF协议完成 二、实验步骤 &#xf…

Leetcode-每日一题【剑指 Offer 09. 用两个栈实现队列】

题目 用两个栈实现一个队列。队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead ,分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素,deleteHead 操作返回 -1 ) 示例 1: 输入: [&…

数据库的约束 详解

一、约束的概述 1.概念:约束是作用于表中字段上的规则,用于限制存储在表中的数据。 2.目的:保证数据库中数据的正确、有效性和完整性。 3.分类: 约束描述关键字非空约束限制该字段的数据不能为nullNOT NULL唯一约束保证该字段的所有数据都是唯一、不…

c51单片机16个按键密码锁源代码(富proteus电路图)

注意了:这个代码你是没法直接运行的,但是如果你看得懂,随便改一改不超过1分钟就可以用 #include "reg51.h" #include "myheader.h" void displayNumber(unsigned char num) {if(num1){P10XFF;P10P11P14P15P160;}else if…

【MySQL】事务与隔离级别

目录 一、事务的概念二、为什么要有事务三、引擎对事务的支持四、事务的提交方式五、事务的操作5.1 准备5.2 正常事务操作5.3 非正常事务5.4 总结 六、事务的隔离级别6.1 隔离性6.2 隔离级别6.3 隔离级别的查看6.4 设置隔离级别6.4.1 会话级别6.4.2 全局级别 6.5 隔离级别的具体…

CleanMyMac真的有必要买吗 2023年最新CleanMyMac和腾讯柠檬详细解析

在如今的电脑使用过程中,保持电脑干净整洁是一项重要的任务。而随着Mac电脑越来越受欢迎,Mac电脑清理软件也愈发流行。在众多的Mac电脑清理软件中,CleanMyMac是一款备受好评的软件。但是,很多人还在犹豫CleanMyMac有必要买吗&…

TechTool Pro for mac(硬件监测和系统维护工具)

TechTool Pro 是为 Mac OS X 重新设计的全新工具程序,不但保留旧版原有的硬件侦测功能,还可检查系统上其他重要功能,如:网络连接,区域网络等。 TechTool Pro for mac随时监控和保护您的电脑,并可预设定期检…

注意公文写作中的“误区”

当下,公文写作中存在种种“误区”。概括起来,主要有以下几种: 误区一,公文写作没什么“学问”。毋庸置疑,公文写作是一门新兴学科,科学的理论体系尚未完全建立,但不能据此认为公文写作没什么学…

【机器学习】编码、创造和筛选特征

在机器学习和数据科学领域中,特征工程是提取、转换和选择原始数据以创建更具信息价值的特征的过程。假设拿到一份数据集之后,如何逐步完成特征工程呢? 文章目录 一、特性类型分析1.1 数值型特征1.2 类别型特征1.3 时间型特征1.4 文本型特征1.…

软考A计划-系统集成项目管理工程师-信息系统安全管理-下

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 👉关于作者 专注于Android/Unity和各种游…