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

用webpack 构建自己的vue-cli

news 2026/4/1 23:39: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

别再看水刊了！智能故障诊断领域投稿，这20+个SCI期刊才是你的目标（附避坑指南）

智能故障诊断领域投稿指南&#xff1a;20高价值SCI期刊与避坑策略 对于从事智能故障诊断研究的学者而言&#xff0c;选择合适的SCI期刊投稿是研究成果获得认可的关键一步。本文将系统梳理该领域的优质期刊资源&#xff0c;帮助您避开常见陷阱&#xff0c;提高投稿成功率。 1. 智…...

编程新知 2026/4/1 21:36:33

DevOps实践：如何让开发、测试、运维不再“打架”？

质量不再是孤岛在追求快速迭代的现代软件开发中&#xff0c;开发、测试与运维团队之间的隔阂与摩擦&#xff0c;常常被戏称为“部门战争”。开发团队渴望快速交付新功能&#xff0c;测试团队需要足够的时间来保障质量&#xff0c;而运维团队则首要追求系统的稳定与可靠。当发布…...

编程新知 2026/4/1 20:03:37

国产铷原子钟 快稳铷原子钟突破铷钟启动时长痛点 铷钟 特种铷原子钟

在数字化浪潮席卷全球的今天&#xff0c;时频同步已成为支撑通信、电力、国防、科研等关键领域稳定运行的核心基石。从6G基站的纳秒级协同&#xff0c;到智能电网的故障精准定位&#xff0c;再到北斗导航的车道级精度保障&#xff0c;每一个场景都对时间频率的准确度、稳定度提…...

编程新知 2026/4/1 19:19:06

YOLOv8 Face：从技术原理到生产级人脸检测系统构建指南

YOLOv8 Face&#xff1a;从技术原理到生产级人脸检测系统构建指南 【免费下载链接】yolo-face YOLO Face &#x1f680; in PyTorch 项目地址: https://gitcode.com/gh_mirrors/yo/yolo-face 在当今计算机视觉领域&#xff0c;实时人脸检测技术已成为智能交互、安全监控…...

编程新知 2026/4/1 18:27:47

当条形图遇上极坐标：径向与圆形条形图的视觉革命

1. 设计原理这两种图表把传统的笛卡尔坐标系换成极坐标系&#xff1a;角度表示类别&#xff0c;半径或角度长度表示数值。1.1. 径向条形图径向条形图本质上是将传统条形图的直角坐标系转换为极坐标系。在极坐标系中&#xff0c;每个数据点不再由(x, y)定位&#xff0c;而是由(角…...

编程新知 2026/4/1 18:21:20

网络调试无从下手？Fiddler中文版让HTTP问题排查效率提升10倍的秘密

网络调试无从下手&#xff1f;Fiddler中文版让HTTP问题排查效率提升10倍的秘密 【免费下载链接】zh-fiddler Fiddler Web Debugger 中文版 项目地址: https://gitcode.com/gh_mirrors/zh/zh-fiddler 在当今复杂的网络环境中&#xff0c;开发者和测试工程师经常面临HTTP请…...

编程新知 2026/4/1 17:33:12

手把手教你从Docker中提取Milvus二进制文件并配置集群环境

深度解析&#xff1a;从Docker镜像提取Milvus二进制文件的完整实践指南 在向量数据库领域&#xff0c;Milvus凭借其出色的性能和可扩展性已经成为众多AI应用的首选基础设施。虽然官方推荐使用Docker进行部署&#xff0c;但在生产环境中&#xff0c;直接使用二进制文件部署往往…...

编程新知 2026/4/1 17:03:39

视频PPT提取终极指南：3步从视频中智能提取演示文稿

视频PPT提取终极指南&#xff1a;3步从视频中智能提取演示文稿 【免费下载链接】extract-video-ppt extract the ppt in the video 项目地址: https://gitcode.com/gh_mirrors/ex/extract-video-ppt 你是否曾经需要从视频中提取PPT内容&#xff0c;却苦于手动截图效率低…...

编程新知 2026/4/1 16:32:50

利用快马平台快速生成virtualbox虚拟机配置脚本，搭建云端开发原型环境

今天想和大家分享一个快速搭建云端开发环境的小技巧。最近在尝试用VirtualBox创建Ubuntu服务器环境时&#xff0c;发现手动配置特别耗时&#xff0c;于是研究了一套自动化脚本方案&#xff0c;配合InsCode(快马)平台的快速生成功能&#xff0c;整个过程变得异常简单。 为什么需…...

编程新知 2026/4/1 15:52:28

Qwen3-14B中文大模型部署教程：token处理优化与生成质量调优

Qwen3-14B中文大模型部署教程&#xff1a;token处理优化与生成质量调优 1. 镜像概述与环境准备 Qwen3-14B是由通义千问团队开发的中文大语言模型&#xff0c;在各类自然语言处理任务中表现出色。本教程将详细介绍如何基于优化定制的私有部署镜像&#xff0c;快速搭建Qwen3-14…...

编程新知 2026/4/1 14:03:45