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

用webpack 构建自己的vue-cli

news 2026/5/24 14:51:17

步骤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

使用taotoken后github actions自动化任务中的api调用稳定性观察

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 使用taotoken后github actions自动化任务中的api调用稳定性观察 1. 背景与迁移动机 在持续集成与自动化开发流程中&#xff0c;Gi…...

编程新知 2026/5/24 14:05:30

Informer2020：突破Transformer计算瓶颈，实现长序列时间预测的工业级解决方案

Informer2020&#xff1a;突破Transformer计算瓶颈&#xff0c;实现长序列时间预测的工业级解决方案 【免费下载链接】Informer2020 The GitHub repository for the paper "Informer" accepted by AAAI 2021. 项目地址: https://gitcode.com/gh_mirrors/in/Informe…...

编程新知 2026/5/24 13:53:04

HS2-HF Patch：你的HoneySelect2游戏体验终极解决方案

HS2-HF Patch&#xff1a;你的HoneySelect2游戏体验终极解决方案 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 还在为HoneySelect2的语言障碍、MOD兼容性问题…...

编程新知 2026/5/24 13:11:42

PvZ Toolkit完整指南：植物大战僵尸终极修改器使用教程 [特殊字符]

PvZ Toolkit完整指南&#xff1a;植物大战僵尸终极修改器使用教程 &#x1f3ae; 【免费下载链接】pvztoolkit 植物大战僵尸 PC 版综合修改器 项目地址: https://gitcode.com/gh_mirrors/pv/pvztoolkit 植物大战僵尸&#xff08;Plants vs. Zombies&#xff09;作为一款…...

编程新知 2026/5/24 10:48:15

别再为单细胞数据批次效应发愁了！手把手教你用Harmony算法搞定整合分析（附Seurat实战代码）

单细胞数据整合实战&#xff1a;用Harmony算法高效消除批次效应当我们面对来自不同实验室、不同测序平台或不同实验条件的单细胞RNA测序数据时&#xff0c;一个无法回避的挑战就是批次效应。这种技术性变异会掩盖真实的生物学差异&#xff0c;导致细胞聚类混乱、跨样本比较失效…...

编程新知 2026/5/24 8:19:36

从语义网到知识图谱：构建与神经符号融合实战指南

1. 从语义网到知识图谱&#xff1a;一场关于数据理解的革命如果你在2001年读到蒂姆伯纳斯-李那篇关于语义网的著名文章&#xff0c;可能会觉得那是一个遥远而宏大的梦想&#xff1a;让机器像人一样理解网页内容的含义&#xff0c;而不仅仅是展示文本。二十多年过去了&#xff0…...

编程新知 2026/5/24 7:59:50

统信UOS 20.1060专业版美化全攻略：从桌面到GRUB再到锁屏，一次搞定个性化设置

统信UOS 20.1060专业版深度美化指南&#xff1a;打造高效统一的视觉工作流第一次打开统信UOS专业版时&#xff0c;默认的蓝色渐变桌面确实给人一种专业稳重的印象。但连续使用几周后&#xff0c;我发现自己开始对着千篇一律的界面走神——这就像每天穿着同样的西装上班&#xf…...

编程新知 2026/5/24 5:49:23

数字-模拟量子机器学习：NISQ时代AI的务实路径

1. 量子机器学习&#xff1a;当AI遇见量子世界最近几年&#xff0c;一个词在科技圈里被反复提及&#xff1a;量子优势。听起来很科幻&#xff0c;对吧&#xff1f;但如果你深入了解一下当前最前沿的量子计算硬件——那些被称为NISQ&#xff08;含噪声中等规模量子&#xff09;的…...

编程新知 2026/5/24 5:47:23

从准确率到社会福利：机器学习在社会资源分配中的范式演进

1. 从预测到分配&#xff1a;为什么准确率不再是社会场景下机器学习的唯一目标 在过去的十几年里&#xff0c;我亲眼见证了机器学习从一个学术概念&#xff0c;成长为驱动我们数字生活乃至部分现实决策的核心引擎。从最初在实验室里调参&#xff0c;看着模型在MNIST数据集上的准…...

编程新知 2026/5/24 5:36:56

为什么92%的医学生用错Claude读文献？——神经内科、肿瘤学、循证护理三大领域TOP10错误清单（含修正对照表）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;为什么92%的医学生用错Claude读文献&#xff1f; 医学生普遍将Claude当作“高级PDF阅读器”&#xff0c;直接上传整篇NEJM或Lancet论文PDF并输入“总结一下”&#xff0c;却忽视其对长文本结构化处理的…...

编程新知 2026/5/24 3:30:31