当前位置： 首页 > news >正文

用webpack 构建自己的vue-cli

news 2026/2/7 1:10:22

步骤1 ：新建文件夹 my-vue-cli 

步骤2： 在文件夹中输入npm init  (拥有npm管理环境)，之后可以安装我们所需要的包

步骤3：安装 webpack、webpack-cli (webpack打包工具，webpack 执行依赖webpack-cli)

             npm i webpack webpack-cli -D

步骤4：在跟目录下新建src(放项目主要代码)、public(放公用静态资源)

public/index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>my-vue-cli</title></head><body><div id="app"></div></body></html>

src/main.js

import { add } from './tools/add.js'
console.log(add(1, 2))
console.log('我是main.js')

src/tools/add.js

export const add = (a, b) => {return a + b
}

步骤5：入口文件（webpack打包需要从入口文件开始查找，一直到打包所有引用文件）

进行入口文件的配置，在根目录下新建webpack.config.js：

const path = require('path')module.exports = {// 模式 开发模式mode: 'development',// 入口文件 main.jsentry: {main: './src/main.js'},// 输出output: {// 输出到 dist文件夹path: path.resolve(__dirname, './dist'),// js文件下filename: 'js/chunk-[contenthash].js',// 每次打包前自动清除旧的distclean: true,}
}

步骤6：配置打包命令

package.json

"scripts": {"build": "webpack"
},

此刻，运行命令 npm run build，就能发现打包成功  出现dist/js/chunk-c3454564....，接着我们需要在index.html文件中 引入打包出来的js ,并且可以打包html 文件才可以。

步骤7：如何打包html

打包html需要用到html-webpack-plugin插件，npm i html-webpack-plugin -D。需要在webpack.config.js 中配置

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// 刚刚的代码...// 插件都放 plugins 中plugins: [new HtmlWebpackPlugin({// 选择模板 public/index.htmltemplate: './public/index.html',// 打包后的名字filename: 'index.html',// js文件插入 body里inject: 'body',}),]
}

此刻在运行npm run build可以看到html被打包，且打包后的html 自动引入了打包后的js 文件

步骤8：打包CSS 

在src 文件夹下创建styles 文件夹，用来存放样式 src/styles/index.scss,在 入口文件main.js中引入  import './styles/index.scss'

需要安装 sass、sass-loader:可以将scss代码转换成css       css-loader 使webpack具有打包css的能力       sass-resources-loader 可选 支持打包全局公共scss 文件       mini-css-extract-plugin:可将css代码打包成一个单独的css文件

npm i 
sass
sass-loader
sass-resources-loader
mini-css-extract-plugin
-D

配置webpack.config.js

// 刚才的代码...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {// 刚才的代码...plugins: [// 刚才的代码...new MiniCssExtractPlugin({// 将css代码输出到dist/styles文件夹下filename: 'styles/chunk-[contenthash].css',ignoreOrder: true,}),],module: {rules: [{// 匹配文件后缀的规则test: /\.(css|s[cs]ss)$/,use: [// loader执行顺序是从右到左MiniCssExtractPlugin.loader,'css-loader','sass-loader',// {//   loader: 'sass-resources-loader',//   options: {//     resources: [//       // 放置全局引入的公共scss文件//     ],//   },// },],},]}
}

此时打包，可以看到index.html 文件引入了css  打包图片用asset-module

此时我们完成了打包html、css、 js 和图片 下篇文章继续介绍 babel(将高级语法转换成低级语法，兼容一些低版本的浏览器)  打包vue   热启动  环境区分 构建打包进度条 以及source-map(快速定位代码出错位置)等内容

相关文章：

用webpack 构建自己的vue-cli

步骤1 &#xff1a;新建文件夹 my-vue-cli 步骤2&#xff1a; 在文件夹中输入npm init (拥有npm管理环境)&#xff0c;之后可以安装我们所需要的包 步骤3&#xff1a;安装 webpack、webpack-cli (webpack打包工具&#xff0c;webpack 执行依赖webpack-cli) npm i webpack w…...

编程日记 2024/3/26 17:45:48

ZCC6982最大充电电流 2A、升压型 2 节锂电池充电管理器

特性 ■ 高达 2A 的可调充电电流&#xff08;受实际散热和输入功率限制&#xff09; ■ 支持 8.4V、8.6V、8.7V、8.8V 的充满电压 ■ 高达 28V 的输入耐压保护 ■ 高达 28V 的电池端耐压保护 ■ 宽输入工作电压范围&#xff1a;3.0V~6.5V ■ 峰值效率可达 96%、重载…...

编程日记 2024/3/26 17:43:45

【机器学习】无监督学习算法之：K均值聚类

K均值聚类 1、引言2、K均值聚类2.1 定义2.2 原理2.3 实现方式2.4 算法公式2.4.1 距离计算公式2.4.1 中心点计算公式 2.5 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c; K均值聚类 我不懂&#xff0c;能不能给我讲一讲&#xff1f; 小鱼&#xff1a;行&#xf…...

编程日记 2024/3/26 17:42:44

为wordpress特定分类目录下的内容添加自定义字段

在WordPress中&#xff0c;您可以使用自定义字段(Custom Fields)或称为元数据(Meta Data)来为特定分类目录下的内容添加额外的信息。自定义字段可以附加到文章、页面、用户和其他对象上。以下是一个逐步指南&#xff0c;介绍如何为特定分类目录下的内容添加自定义字段&#xff…...

编程日记 2024/3/26 17:41:42

javaWeb在线考试系统

一、简介 在线考试系统是现代教育中一项重要的辅助教学工具&#xff0c;它为学生提供了便捷的考试方式&#xff0c;同时也为教师提供了高效的考试管理方式。我设计了一个基于JavaWeb的在线考试系统&#xff0c;该系统包括三个角色&#xff1a;管理员、老师和学生。管理员拥有菜…...

编程日记 2024/3/26 17:40:41

项目管理商业文件--商业论证与效益管理计划

本文描述从事项目管理和了解项目管理领域所需的基本知识&#xff0c;词汇定义来自于《项目知识管理体系》(PMBOK指南)第六版&#xff0c;仅作个人学习使用&#xff0c;任何对此文章的引用&#xff0c;应当说明源出处&#xff0c;不得用于商业用途。 如有侵权、联系速删 文章目录…...

编程日记 2024/3/26 17:39:40

机器学习揭秘：解锁从理论到实践的每一步！

机器学习揭秘&#xff1a;解锁从理论到实践的每一步&#xff01; 机器学习&#xff1a;从理论到实践的完整指南引言第一部分&#xff1a;机器学习概念定义与重要性历史背景 第二部分&#xff1a;机器学习步骤数据收集数据预处理特征工程模型选择训练模型模型评估参数调优模型部…...

编程日记 2024/3/26 17:38:39

Kotlin协程CoroutineScope命名空间CoroutineName，Kotlin

Kotlin协程CoroutineScope命名空间CoroutineName&#xff0c;Kotlin import kotlinx.coroutines.*fun main(args: Array<String>) {val myName CoroutineName("fly")runBlocking {CoroutineScope(Dispatchers.IO).launch {repeat(3) {val name coroutineCont…...

编程日记 2024/3/26 17:35:36

HAL STM32G4 +TIM1 3路PWM互补输出+VOFA波形演示

HAL STM32G4 TIM1 3路PWM互补输出VOFA波形演示 ✨最近学习研究无刷电机驱动&#xff0c;虽然之前有使用过&#xff0c;但是在STM32上还没实现过。本文内容参考欧拉电子例程&#xff0c;从PWM驱动开始学习。 欧拉电子相关视频讲解&#xff1a; STM32G4 FOC开发实战—高级定时器发…...

编程日记 2024/3/26 17:33:33

MySQL进阶-----索引的结构与分类

目录 前言 一、认识索引 二、索引结构 1.概述 2. 二叉树 3 .B-Tree 4.BTree 5.Hash 三、索引的分类 1 .索引分类 2 .聚集索引&二级索引 前言 索引&#xff08;index&#xff09;是帮助MySQL高效获取数据的数据结构(有序)。在数据之外&#xff0c;数据库系统还维…...

编程日记 2024/3/26 17:31:30

FPGA高端项目：解码索尼IMX390 MIPI相机转HDMI输出，提供FPGA开发板+2套工程源码+技术支持

目录 1、前言2、相关方案推荐本博主所有FPGA工程项目-->汇总目录我这里已有的 MIPI 编解码方案 3、本 MIPI CSI-RX IP 介绍4、个人 FPGA高端图像处理开发板简介5、详细设计方案设计原理框图IMX390 及其配置MIPI CSI RX图像 ISP 处理图像缓存HDMI输出工程源码架构 6、工程源码…...

编程日记 2024/3/26 17:30:29

激光显示技术不断进步 国家政策推动行业发展

激光显示技术不断进步 国家政策推动行业发展 激光显示技术即用激光器作为光源的图像信息终端显示技术&#xff0c;是一种新型的投影显示技术。激光显示具有高亮度、色域覆盖率广、维护成本低等优点&#xff0c;在车载显示、家庭娱乐、教育等领域中应用广泛。激光显示产品主要有…...

编程日记 2024/3/26 17:26:24

iOS开发优势解析，费用探究以及软件开发详解

摘要 本文探讨了iOS开发的优势、费用以及软件开发方面的相关内容。通过分析iOS开发所采用的编程语言、开发环境、用户界面设计、应用审核流程以及应用领域等方面&#xff0c;展示了iOS开发的诸多优势和特点。虽然iOS开发具有高用户体验、统一的硬件和软件环境、良好的市场份额…...

编程日记 2024/3/26 17:23:20

02课程发布模块之部署Nginx

部署Nginx 部署网关 通过Nginx访问后台网关&#xff0c;然后由网关再将请求转发到具体的微服务,网关会把请求转发到具体的服务 upstream gatewayserver{server 127.0.0.1:63010 weight10; } # 网站首页对应的虚拟机 server {listen 80;server_name www.51xuecheng.cn…...

编程日记 2024/3/26 17:17:13

web学习笔记（四十二）

目录 1.ECMAScript 新特性-async 和await 1.1async函数 1.2await函数 1.3补充&#xff1a; 2. ES6模块化 2.1模块化的优点 2.2 ES6 模块化语法 2.3 ES6 模块暴露 2.4ES6 模块导入 1.ECMAScript 新特性-async 和await 1.1async函数 async函数可以单数使用&#xff0c;…...

编程日记 2024/3/26 17:15:10

大模型分布式推理ray

一、目录 1 框架 2. 入门 3. 安装教程 4. 相关文档、案例阅读 二、实现 1 框架&#xff1a;Ray&#xff1a;将一个模型拆分到多个显卡中&#xff0c;实现分布式预测、训练等功能。 2. 入门 &#xff1a; 案例&#xff1a;通过ray 实现分布式部署&#xff0c;分布式推理服务。…...

编程日记 2024/3/26 17:09:04

Python学习：循环语句

Python循环语句 概念 循环语句是编程中常用的结构&#xff0c;用于多次执行相同或类似的代码块。Python中有两种主要的循环语句&#xff1a;for循环和while循环。 for循环&#xff1a; for循环用于遍历一个序列&#xff08;如列表、元组、字符串等&#xff09;中的元素&#x…...

编程日记 2024/3/26 17:08:03

【物联网开源平台】tingsboard二次开发

别看这篇了&#xff0c;这篇就当我的一个记录&#xff0c;我有空我再写过一篇&#xff0c;编译的时候出现了一个错误&#xff0c;然后我针对那一个错误执行了一个命令&#xff0c;出现了绿色的succes,我就以为整个tingsboard项目编译成功了&#xff0c;后面发现的时候&#xff…...

编程日记 2024/3/26 17:02:57

Vue+ELement UI el-table移入或选中某行时改变颜色

起因 出库按钮 置灰时&#xff0c;鼠标移入到表格的某行时&#xff0c;行背景颜色与按钮背景颜色会被覆盖住 最初颜色 实现效果 修改行背景颜色 <style>/* 用来设置当前页面element全局table 选中某行时的背景色*/.el-table__body tr.current-row>td{background-c…...

编程日记 2024/3/26 16:59:52

【Git】日志功能

1. git日志显示 # 显示前3条日志 git log -3# 单行显示 git log --oneline# 图表日志 git log --graph# 显示更改摘要 git log --stat# 显示更改位置 git log --patch 或 git log -p# 查看指定文件的提交历史记录 git log {filename}例子1&#xff1a;单行显示 例子2&#xff…...

编程日记 2024/3/26 16:58:51

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/2/5 8:19:14

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2026/1/20 22:45:38

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/28 2:18:46

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2026/1/24 12:58:24

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2026/1/26 13:48:59