关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析

news2024/9/25 23:20:24

webpack、webpack-cli的打包        

关于 webpack 对前端工程中进行资源文件进行打包处理的过程中,运用到的核心插件主要是 webpack 和 webpack-cli,在 react 和 vue 对于打包各自工程中的 cli 则是进行了自定义的构建,专门用于项目打包的 cli。可简单的进行自定义运行 webpack 的编译运行文件。例如:

通过 webpack-cli 运用 webpack 进行文件资源打包压缩处理,执行script 中的脚本命令后,webpack-cli 会自动编译解析工程中的 webpack.config.js 文件,运用 webpack 对文件进行打包。

自定义编译运行文件进行打包的简单实现

引入 webpack.config.js 文件,通过webpack 去加载 webpack.config.js 文件,会创建一个compiler对象,里面内置了 run方法即可对 webpack.config.js 文件进行编译运行

build.js

const webpack = require('webpack')
const config = require('./webpack.config')

const compiler = webpack(config)
compiler.run((err, stats) => {
  if(err) {
    console.error(err)
  } else {
    console.log(stats);
    
  }
})

命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。

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

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

相关文章

【MySQL-25】万字总结<锁>——(全局锁&行级锁&表级锁)【共享锁,排他锁】【间隙锁,临键锁】【表锁,元数据锁,意向锁】

前言 大家好吖,欢迎来到 YY 滴MySQL系列 ,热烈欢迎! 本章主要内容面向接触过C的老铁 主要内容含: 欢迎订阅 YY滴C专栏!更多干货持续更新!以下是传送门! YY的《C》专栏YY的《C11》专栏YY的《Lin…

Bytebase 2.22.2 - 允许在工作空间为群组分配角色

🚀 新功能 允许在工作空间给群组分配角色。 支持禁用邮箱密码登录,仅允许 SSO 登录的设置项。 新增 Postgres SQL 审核规则:禁止在列上设置会变化的默认值。 🔔 重大变更 下线项目内的变更历史页面;所有变更历史仍可…

Phoenix

Apache Phoenix 是一个开源的关系数据库层,运行在 Apache HBase 之上,旨在为 HBase 提供 SQL 查询能力和优化的存储引擎。它允许用户使用标准的 SQL 查询和事务语义来管理 HBase 中的数据,并且可以与现有的大数据生态系统无缝集成。Phoenix 通…

IOS开发 铃声制作(库乐队)

IOS开发,实现铃声制作功能。 在IOS端,要设置铃声都是通过库乐队来制作的。 先看一下库乐队中铃声的文件结构。下面是弄的一个示例的文件,文件信息如下: 我们右击文件,点击显示包内容如下: 能看到一个aiff格…

解决ssl certificates updated-生成环境中的实例

应原来小伙伴的要求,生产环境出错了,是harbor的ssl cert过期了,也因为使用的是免费的ssl证书,现在无法正常使用harbor,所以贴来了2023年1月曾经搭建的文档,希望能解决问题。^v^. -------------------------…

25 filedialog组件

Tkinter filedialog 组件使用指南 Tkinter 的 filedialog 组件提供了一个图形界面,用于打开和保存文件。它允许用户通过标准的文件选择对话框来选择文件,非常适合需要文件操作的GUI应用程序。以下是对 filedialog 组件的详细说明和一个使用案例。 file…

爆改YOLOv8 |YOLOv8融合SEAM注意力机制

1,本文介绍 SEAM(Spatially Enhanced Attention Module)是一个注意力网络模块,旨在解决面部遮挡导致的响应损失问题。通过使用深度可分离卷积和残差连接的组合,SEAM模块增强未遮挡面部的响应。深度可分离卷积在每个通…

Xshell 连接 Ubuntu 服务器失败问题(Connection failed)

目录 Xshell 连接 Ubuntu 服务器失败问题(Connection failed) 1.查看Ubuntu中是否安装 sshd 2.在Ubuntu中安装sshd 3.需要打开Ubuntu中新安装的sshd 4.在检查Ubuntu中sshd是否安装成功 5.临时关闭Ubuntu中的防火墙 6.Xshell 连接 Ubuntu 服务器成…

认知杂谈24

今天分享 有人说的一段争议性的话 I I 《人生逆袭的关键:开窍带来的转变》 在女人的生活里啊,最宝贝的东西可不是那些金银首饰啥的,也不只是那些起起落落的经历,更不是偶尔碰到的贵人帮忙。真正无价的,是在某个瞬间…

构建buildroot根文件系统

目录 1.确定gcc工具版本2.下载Buildroot源码并编译2.1 下载Buildroot源码2.2 配置Buildroot2.2.1 配置 Target options2.2.2 配置交叉编译工具链2.2.3 配置 System configuration2.2.4 配置 Filesystem images2.2.5 禁止编译 Linux 内核和 uboot2.2.6 编译Buildroot源码2.2.7 查…

Bootloader中的PBL、SBL的区别

从0开始学习CANoe使用 从0开始学习车载车身 相信时间的力量 星光不负赶路者,时光不负有心人。 目录 1.概述2.BootloaderPBLSBL3.SBL存在意义4.PBL存在意义 1.概述 应用软件和应用数据可以同时编程或者相互独立编程,不允许Boot Loader在软件运行时被非法…

透明度测试

1、透明测试是用于处理哪种透明需求 在游戏开发中对象的某些部位完全透明而其他部位完全不透明,这种透明需求往往不需要半透明效果,相对比较极端,只有看得见和看不见之分比如树叶、草、栅栏等等。(即一张图除了主要物体有颜色,其…

<WPF> xaml代码如何使用c#编写

<Window x:Class"grid面板的使用.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend/2008&…

【Java】—— Java面向对象基础:编程实例(学生信息管理)

目录 场景描述 定义学生类 创建学生对象并处理需求 代码解析 总结 在Java中&#xff0c;面向对象编程&#xff08;OOP&#xff09;是一种常用的编程范式&#xff0c;它允许我们创建基于现实世界的模型&#xff0c;通过类和对象来模拟这些模型。今天&#xff0c;我们将通过…

MySQL 集群技术全攻略:从搭建到优化(上)

目录 一.Mysql在服务器中的部署方法 1.在Linux下部署mysql 二.mysql的组从复制 1.当有数据时添加slave2 2.延迟复制 3.慢查询日志 4.mysql的并行复制 5.原理架构图 5.1三个线程 5.2复制三步骤 6.架构缺陷 三.半同步模式 1.半同步模式原理 2.gtid模式 3.启用半同…

数组、向量与矩阵

问题缘起 在看《矩阵力量》的时候&#xff0c;写到 利用 a numpy.array([4,3]). 严格说&#xff0c;此代码产生的不是行向量&#xff0c;运行 a.ndim 发现 a 只有一个维度。因此&#xff0c;转置 numpy.array([4,3]).T 得到的仍然是一维数组&#xff0c;只不过默认展示方式为…

腾讯提出一种新的针对风格化角色和逼真服装动画的生成3D运动转移方法,生成效果逼真!

来自腾讯XR视觉实验室的研究团队提出了一种创新的3D运动转移方法&#xff0c;专门针对风格化角色和逼真服装动画的生成。该方法能够将源动作准确地映射到目标角色上&#xff0c;同时考虑了角色身体的刚性变形和服装的局部物理动态变形。 与现有技术相比&#xff0c;这技术不仅…

探索分析文档布局,基于YOLOv8全系列【n/s/m/l/x】参数模型开发构建大规模文档数据集DocLayNet场景下文档图像布局智能检测分析识别系统

随着数字化和信息化的快速发展&#xff0c;大量的文档&#xff08;如合同、报告、表格、发票等&#xff09;以电子形式存在&#xff0c;这些文档中包含了丰富的信息。然而&#xff0c;这些信息往往以非结构化的形式存在&#xff0c;难以直接被计算机程序理解和处理。文档布局分…

8.26DEBUG

线程负责监听和处理不同的需求 顾客&#xff1a;代表需要被监控的文件句柄或网络socket&#xff0c;他们可能有各种需求&#xff0c;如点餐&#xff08;发送数据&#xff09;、询问菜品状态&#xff08;读取数据&#xff09;或需要帮助&#xff08;异常处理&#xff09; 菜单…

Android adb shell查看手机user,user_root,user_debug版本

Android adb shell查看手机user&#xff0c;user_root&#xff0c;user_debug版本 1、首先&#xff0c; adb shell 2、进入后&#xff0c;运行&#xff1a; getprop | grep ro.system.build.type 即会输出当前手机类型user,user_debug等。 另外&#xff0c;也可以运行&#…