webpack5基础--02_基本配置( 5 大核心概念)

基本配置

在开始使用 Webpack 之前,我们需要对 Webpack 的配置有一定的认识。

5 大核心概念

  1. entry(入口)

指示 Webpack 从哪个文件开始打包

  1. output(输出)

指示 Webpack 打包完的文件输出到哪里去,如何命名等

  1. loader(加载器)

webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader,Webpack 才能解析

  1. plugins(插件)

扩展 Webpack 的功能

  1. mode(模式)

主要由两种模式:

  • 开发模式:development
  • 生产模式:production

准备 Webpack 配置文件

在项目根目录下新建文件:webpack.config.js

module.exports = {// 入口entry: "",// 输出output: {},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: "",
};

Webpack 是基于 Node.js 运行的,所以采用 Common.js 模块化规范

修改配置文件

  1. 配置文件
// Node.js的核心模块,专门用来处理文件路径
const path = require("path");module.exports = {// 入口// 相对路径和绝对路径都行entry: "./src/main.js",// 输出output: {// path: 文件输出目录,必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, "dist"),// filename: 输出文件名filename: "main.js",},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: "development", // 开发模式
};
  1. 运行指令
npx webpack

此时功能和之前一样,也不能处理样式资源

小结

Webpack 将来都通过 webpack.config.js 文件进行配置,来增强 Webpack 的功能

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

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

相关文章

Vue项目构建时遇到的问题

Vue项目构建时遇到的问题与上线相关问题 项目构建遇到的问题构建指令关于JavaScript文件无法识别的问题关于element-plus组件库中的模块显示找不到的问题关于路由懒加载时组件路径报错问题关于项目静态资源基准路径的设置关于路由模式的问题 关于nginx服务器的使用 项目构建遇到…

事物管理(黑马学习笔记)

事物回顾 在数据库阶段我们已学习过事务了,我们讲到: 事物是一组操作的集合,它是一个不可分割的工作单位。事务会把所有的操作作为一个整体,一起向数据库提交或者是撤销操作请求。所以这组操作要么同时成功,要么同时…

java实现根据 表索引 批量新增或更新数据信息

目的 通过数据库名、表名实现动态添加活更新数据。添加或更新由唯一索引判断。 实现 思路 查询数据库表的唯一索引-CSDN博客 根据数据库表名动态查询表字段-CSDN博客 达梦数据库根据唯一索引批量新增或更新数据-CSDN博客 将数据转换为sql语句需要的格式 完善代码,实…

maven常用打包命令

1.背景 2.代码 1 mvn常用命令 一般情况下对于一个maven项目,cd切换到当前项目路径下,执行如下示例命令即可对项目进行打包。 mvn clean install mvn -U clean package -Dmaven.test.skiptrue mvn clean package -Dmaven.test.skiptrue -P prod mvn cle…

JavaScript数组操作指南:20个精通操作技巧指南

splice、 slice、 pop 和 shift。数组的排序方法是稳定且非原地算法的吗?要记住所有 JavaScript 数组方法以及它们之间的区别并不容易。它们的名称相似,就好像直接从同义词词典中提取一样。 这个数组速查表列出了 JavaScript 中通常需要的所有数组方法&…

Gson使用Object接收长数字问题

近期发现公司同事在使用Gson对数字进行反序列列化时出现丢失精度的问题,在这里搬运一下,做个记录~ 现象 使用Gson反序列化长Long数字(大于16位),如果用Object类型来接收则会丢失精度。 Gson会将数字反序列化为double类型,double类型本身就容易丢精度。…

小程序基础

小程序基础 1. 认识什么是小程序 什么是微信小程序 微信小程序是一种运行在微信内部的 轻量级 应用程序。 在使用小程序时 不需要下载安装,用户 扫一扫 或 搜一下 即可打开应用。它也体现了 “用完即走” 的理念,用户不用关心安装太多应用的问题。它…

weak的实现原理

iOS 在运行时维护着一个全局的弱引用表,该表是一个 hash 表,hash表的 key 是 对象本身,value 是指向该对象的所有 weak 指针的地址数组。 /**全局的弱引用表,本质是一个hash结构,对象本身作为key, 存储weak修饰的指…

大模型训练经验

1.模型训练好后预测全是起始符号。 解决办法:训练数据的输入输出去掉起始符号。 2.模型训练后学不到有效信息。 加大epoch,我加大到了1000。 3.模型训练后预测没有结束符,暂时未解,另外,发现当训练不足时&#xff…

Metasploit安装及使用教程(非常详细)从零基础入门到精通,看完这一篇就够了。

通过本篇文章,我们将会学习以下内容: 1、在Windows上安装Metasploit 2、在Linux和MacOS上安装Metasploit 3、在Kali Linux中使用 Metasploit 4、升级Kali Linux 5、使用虚拟化软件构建渗透测试实验环境 6、配置SSH连接 7、使用SSH连接Kali 8、配…

如何学习自然语言处理之语言模型

自然语言处理(NLP)是一种人工智能技术,它使计算机能够理解和处理人类语言。而语言模型是NLP中的一个重要概念,主要是用来估测一些词的序列的概率,即预测p(w1, w2, w3 … wn),其中一个应用就是句子的生成。 …

JVM运行流程

⭐ 作者:小胡_不糊涂 🌱 作者主页:小胡_不糊涂的个人主页 📀 收录专栏:JavaEE 💖 持续更文,关注博主少走弯路,谢谢大家支持 💖 JVM 1. 运行流程2. 运行时数据区2.1 堆&am…

ubuntu新建ap热点并分享

测试环境ubuntu16,只有一台笔记本电脑,不插网线,无线网卡既连wifi,又作为热点 1.方法1 直接手动新建ap热点 参考https://jingyan.baidu.com/article/ea24bc39b03fc6da62b331f0.html https://jingyan.baidu.com/article/363872ecd8f35d6e4ba…

机试指南:Ch5:线性数据结构 Ch6:递归与分治

文章目录 第5章 线性数据结构1.向量 vector2.队列 queue(1)队列的特点、应用(2)基本操作(3)例题例题1:约瑟夫问题2 (难度:中等) (4)习题习题1:排队打饭 (难度:中等) 3.栈 stack(1)栈…

前端 JS 经典:Content-type 详解

1. 什么是 Content-Type Content-Type 是 HTTP 协议中的一个请求头或响应头字段,用于指示发送或接收的实体的媒体类型,告诉服务器或客户端如何解析和处理请求或响应的主体部分。 2. Content-Type 的构成 Content-Type 由两部分组成:媒体类型…

视频在线压缩

video2edit 一款免费的在线视频编辑软件,可以进行视频合并、视频剪辑、视频压缩以及转换视频格式等。 链接地址:在线视频编辑器和转换器 - 编辑,转换和压缩视频文件 打开视频压缩页面,上传想要压缩视频,支持MP4&…

收入稳步增长 助力持续发展 尼康发布截至2024年3月财年第三季度财报

近日,尼康截至2024年3月财年的第三季度(2023年10月1日-2023年12月31日)财报正式发布。数据显示,尼康集团第三财季销售收入共计1977亿日元,较去年同期上涨300亿日元,涨幅约17.9%。其中影像业务领域&#xff…

Java面试题:解释Java内存模型中的内存顺序规则,Java中的线程组(ThreadGroup)的工作原理,Java中的FutureTask的工作原理

引言 在Java开发领域,内存模型、多线程和并发是三个至关重要的概念,它们直接影响到程序的性能、稳定性和可扩展性。作为面试官,考察候选人对这些概念的理解和应用能力是评估其技术水平的重要手段。本文将提供三道涉及这些核心知识点的面试题…

视频记录仪_基于联发科MT6762的智能4G记录仪方案

智能记录仪采用联发科强劲八核处理器,12nm制程工艺的记录仪具便是满足这些需求的理想选择。搭载4GB32GB内存,并运行Android 11.0操作系统,这款记录仪具展现出强劲的性能表现。 首先,这款记录仪具具备优秀的视频录制功能。它能完整…

WPS如何共享文件和文件夹

1 WPS共享单个文件 用WPS打开要分享的文件,点击右上角的“分享”键,选择上传到云端。 之后点击“创建并分享”,即可分享该文档。 2 WPS创建共享文件夹 2.1 如何共享文件夹 首先打开WPS,点击左上角的首页。在首页栏中&#…