前端工程化(三)邂逅Webpack和打包过程

目录

    • Vue项目加载
    • Webpack 安装
    • Webpack的默认打包
      • 创建局部的 webpack

Vue项目加载

JavaScript的打包:
 将ES6转换成ES5的语法;
 TypeScript的处理,将其转换成JavaScript;
Css的处理:
 CSS文件模块的加载、提取;
 Less、Sass等预处理器的处理;
资源文件img、font:
 图片img文件的加载;
 字体font文件的加载;
HTML资源的处理:
 打包HTML资源文件;
处理vue项目的SFC文件.vue文件;

Webpack 安装

目前分为两个: webpack、webpack-cli
两者关系
 执行webpack命令,会执行node_modules下的.bin目录下的webpack;
webpack在执行时是依赖webpack-cli的,如果没有安装就会报错;
 而webpack-cli中代码执行时,才是真正利用webpack进行编译和打包的过程;
 所以在安装webpack时,我们需要同时安装webpack-cli(第三方的脚手架事实上是没有使用webpack-cli的,而是类似于自
己的vue-service-cli的东西)
安装命令

npm install webpack webpack-cli -g // 全局安装
npm install webpack webpack-cli -D // 局部安装

Webpack的默认打包

目录下直接执行 webpack 命令即可进行打包
我们发现是可以正常进行打包的,但是有一个问题,webpack是如何确定我们的入口的呢?
 事实上,当我们运行webpack时,webpack会查找当前目录下的 src/index.js作为入口;
 所以,如果当前项目中没有存在src/index.js文件,那么会报错

创建局部的 webpack

第一步:创建package.json文件,用于管理项目的信息、库依赖等

npm init

第二步:安装局部的webpack

npm install webpack webpack-cli -D

第三步:使用局部的webpack

npx webpack

第四步:在package.json中创建scripts脚本,执行脚本打包即可

"scripts": {"build": "webpack"
}
// 执行命令
npm run build

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

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

相关文章

android 14 创建文件java.io.IOException: Operation not permitted

android 14 创建文件java.io.IOException: Operation not permitted Operation not permitted问题原因Android文件系统有哪些 Operation not permitted 问题原因 一般是创建文件时,文件夹或文件名称包含特殊字符,创建文件或文件夹时需要检查文件名称是…

题目:出列(蓝桥OJ 3223)

问题描述: 解题思路: 先使用暴力找到规律再解。 暴力做法:将数据放到一个动态数组中,下标就表示当前编号,符合题意的就放到覆盖该数组中,依次循环,直到只有一个元素停。 规律:小于该…

爬虫(七)

1.批量爬取知网数据 lxml:是 Python 的一个功能强大且易用的 XML 和 HTML 处理库。它提供了简单又轻巧的 API,使得解析、构建和操作 XML 和 HTML 文档变得非常方便。lxml 库通常用于处理 XML 和 HTML 文档,例如解析网页、处理配置文件等。openpyxl:是 Python 中用于操作 Ex…

并发容器之ConcurrentLinkedQueue

ConcurrentLinkedQueue ConcurrentLinkedQueue是一种适用于高并发场景下的队列,通过无锁的方式,实现了高并发状态下的高性能,由于ConcurrentLinkedQueue是一种非阻塞的队列,通常ConcurrentLinkedQueue性能好于BlockingQueue。是一…

uniapp自定义导航栏左中右内容和图标,以及点击事件

uniapp自定义导航栏左中右内容和图标&#xff0c;以及点击事件 效果&#xff1a; 页面&#xff1a; <view class"navigation-bar"><view class"navigation-bar-left" click"navigateBack"><u-icon name"arrow-left"…

【嵌入式开发 Linux 常用命令系列 4.3 -- git add 时单独排除某个目录或者文件】

文章目录 git add 时单独排除某个目录或者文件使用 .gitignore 文件使用命令行排除文件或目录 git add 时单独排除某个目录或者文件 在使用 git add 命令时&#xff0c;如果你想要排除特定的目录或文件&#xff0c;可以使用 .gitignore 文件或使用路径规范来指定不想添加的文件…

ES数据同步:定时重启Logstash,并清除相关数据。

文章目录 引言I crontab 周期自动执行相应命令1.1 crontab语法1.2 crontab 文件示例1.3 系统范围内的 crontab 文件II 定期重启Logstash2.1 同步当天日期的数据2.2 同步指定日期的数据III logstash3.1 conf 参考3.2 statement_filepath3.3 执行IV 预备知识

新的变速箱滚动轴承和齿轮故障数据

变速箱是传动系统中非常关键的一部分&#xff0c;它由齿轮、传动轴、轴承和壳体等组成。变速箱的主要功用包括&#xff1a;&#xff08;1&#xff09;能够改变传动比&#xff0c;按实际情况调整驱动轮转矩和转速&#xff0c;进而满足复杂的行车要求&#xff1b;&#xff08;2&a…

机器学习金融应用技术指南

1 范围 本文件提供了金融业开展机器学习应用涉及的体系框架、计算资源、数据资源、机器学习引擎、机 器学习服务、安全管理、内控管理等方面的建议。 本文件适用于开展机器学习金融应用的金融机构、技术服务商、第三方安全评估机构等。 2 规范性引用文件 下列文件中的内容通过…

新型储能是什么,储能系统解决方案现状及趋势详细说明

新型储能是指新兴的能够存储电能并在需要时释放的储能技术。其中主要包括光伏储能和商业储能。 光伏储能是指通过光伏电池将太阳能转化为电能&#xff0c;并将其存储起来以供后续使用。光伏储能系统一般由太阳能电池板、储能装置和逆变器组成。光伏储能可以将白天产生的电能存…

2024年华为OD机试真题-任务处理-Python-OD统一考试(C卷)

题目描述&#xff1a; 在某个项目中有多个任务&#xff08;用 tasks 数组表示&#xff09;需要您进行处理&#xff0c;其中 tasks[i] [si, ei]&#xff0c;你可以在 si < day < ei 中的任意一天处理该任务。请返回你可以处理的最大任务数。 注&#xff1a;一天可以完成一…

关于linux中mysql8.0修改lower_case_table_names

为什么要修改 在linux中安装mysql时&#xff0c;默认的lower_case_table_names0&#xff0c;即对大小写不敏感在windwos中的mysql&#xff0c;默认的lower_case_table_names1在做程序迁移时&#xff0c;导致linux中部署的服务器无法访问打mysql中的表 修改中的问题 mysql8.0…

代码随想录算法训练营 Day27 回溯算法3

39. 组合总和 思路 根据题意画二叉树 这道题与之前的组合总和的区别在于&#xff0c;数组中的数字可以多次使用&#xff0c;因此每次递归时的startIndex依旧是从当前的i开始 尝试写代码&#xff1a; class Solution:def __init__(self):self.path []self.result []def co…

Java练习题目3:输入一个学生的5门课成绩及对应的学分,计算该同学的加权平均分(WeightedAverageScore3)

每日小语 我们没有意识到惯用语言的结构有多大的力量。可以说&#xff0c;它通过语义反应机制奴役我们。 ——阿尔弗雷德科日布斯基 思考 输入5门课成绩&#xff0c;学分&#xff0c;加权平均分公式 [&#xff08;课程A成绩*课程A学分&#xff09;&#xff08;课程成绩B*课程…

Mybatis-Plus实现乐观锁

1 悲观锁和乐观锁场景和介绍 乐观锁和悲观锁是在并发编程中用于处理并发访问和资源竞争的两种不同的锁机制!! 1.1 悲观锁&#xff1a; 悲观锁的基本思想是&#xff0c;在整个数据访问过程中&#xff0c;将共享资源锁定&#xff0c;以确保其他线程或进程不能同时访问和修改该…

Learn OpenGL 19 几何着色器

几何着色器 在顶点和片段着色器之间有一个可选的几何着色器(Geometry Shader)&#xff0c;几何着色器的输入是一个图元&#xff08;如点或三角形&#xff09;的一组顶点。几何着色器可以在顶点发送到下一着色器阶段之前对它们随意变换。然而&#xff0c;几何着色器最有趣的地方…

动态路由协议——OSPF

目录 一.OSPF来源 二.OSPF术语 1.area id——区域的划分 2.cost——路径开销值 3.route id 4.LSDB表 5.邻居表 6.OSPF路由表 三.OSPF工作过程 1.交互hello报文建立邻居关系 2.选举主从 3.交互LSDB摘要信息 4.LSR,LSU,LSACK同步LSDB表项 5.各自计算路由 四.OSPF交…

简单函数_学分绩点

任务描述 北京大学对本科生的成绩施行平均学分绩点制&#xff08;GPA&#xff09;。既将学生的实际考分根据不同的学科的不同学分按一定的公式进行计算。 公式如下&#xff1a; 实际成绩 绩点 90——100 4.0 85——89 3.7 82——84 3.3 78——81 3.0 75——77 …

redis【面试题】

目录 Java全技术栈面试题合集地址Redis篇1.Redis 的数据类型&#xff1f;2.Redis 是单进程单线程的&#xff1f;3.一个字符串类型的值能存储最大容量是多少&#xff1f;4.Redis 的持久化机制是什么&#xff1f;各自的优缺点&#xff1f;5.redis 过期键的删除策略&#xff1f;6.…

maven手动上传的第三方包 打包项目报错 Could not find xxx in central 解决办法

背景: 在Maven私服手动上传了第三方的jar包, 只有jar包, 没有pom文件, 项目在ide中可以正常编译启动,但打包报错无法找到jar包 解决办法: 上传jar包的时候, 点击生成pom. 则打包的时候不会报错