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

webpack5 + vue3 从零配置项目

前言

虽然在实际项目当中很少会从 0 到 1 配置一个项目,毕竟很多重复工作是没有必要的,脚手架将这些重复性的工作进行了整合,方便开发者使用。也正因如此,导致部分开发者过于依赖脚手架,却不清楚其内部的实现流程,因此通过从 0 到 1 去配置和搭建项目可以更好的理解开发中使用的脚手架都帮我们做了哪些事情。

准备工作

创建目录结构

这里直接使用 npm init vite@latest命令生成 vue3 最新的目录结构:

image.png

当然,需要对这个目录进行一些调整:

  • vite.config.js 换成 webpack.config.js:因为我们要基于 webpack5 对项目进行编译构建
  • 初始化新的 package.json:原本的 package.json 依赖了一些我们不需要的内容,因此直接删除重新初始化
  • 去除 index.html 中的 <script type="module" src="/src/main.js"></script>,因为这是 vite 需要的,但 webpack 并不需要

下面是调整后的目录结构:

image.png

安装基本依赖

下面列出了需要的一些基本依赖,其他的依赖在后面需要的时候在进行安装:

  • npm install vue@next
  • npm install webpack webpack-cli webpack-dev-server -D

webpack 进行基本配置

// webpack.config.jsconst path = require('path')module.exports = {entry: {path: './src/main.js'},output: {filename: 'assets/js/[name].[contenthash:6].js',path: path.resolve(__dirname, './dist')}
}

package.json 中创建脚本

// package.json"scripts": {"dev": "webpack server --mode=development","build": "webpack --mode=production"}

针对不同文件类型进行配置 webpack

启动项目

完后以上准备工作之后,我们就可以通过 npm run dev 命令来启动项目,但是你会发现这样的错误:

在这里插入图片描述

其实就是 webpack 不能认识 .vue 文件,它需要我们提供一个 loader 对其进行处理,这个 loader 就是官方文档中提到的:

其中 @vitejs/plugin-vue 这个是 vite 才需要的,因此我们只需要 vue-loader@next@vue/compiler-sfc

注意:vue-loader 默认是处理 vue2 的,这里使用的是 vue3,所以要安装 vue-loader@next

webpack中处理 .vue 文件

首先通过 npm install vue-loader@next @vue/compiler-sfc -D 安装需要的依赖,然后在 webpack.config.js 中进行配置:

// webpack.config.jsconst path = require('path')
const { VueLoaderPlugin } = require('vue-loader')module.exports = {entry: {path: './src/main.js'},module: {rules: [{test: /\.vue$/,use: 'vue-loader'}]},output: {filename: 'assets/js/[name].[contenthash:6].js',path: path.resolve(__dirname, './dist')},plugins: [new VueLoaderPlugin(),]
}

配置完成之后,我们在通过 npm run dev 启动项目,不出意外的你将得到下面的错误:

在这里插入图片描述

显然 webpack 也不认识 <style></style> 中样式相关的内容,这一点大家都知道,那肯定是要使用 style-loadercss-loader

webpack中处理 <style></style> 样式相关的内容

首先通过 npm install style-loader css-loader -D 安装需要的依赖,然后在 webpack.config.js 中进行配置:

// webpack.config.jsconst path = require('path')
const { VueLoaderPlugin } = require('vue-loader')module.exports = {entry: {path: './src/main.js',},module: {rules: [{test: /\.vue$/,use: 'vue-loader',},{test: /.css$/,use: ['style-loader', 'css-loader'],},],},output: {filename: 'assets/js/[name].[contenthash:6].js',path: path.resolve(__dirname, './dist'),},plugins: [new VueLoaderPlugin(),]
}

配置完成之后,又一次通过 npm run dev 启动项目,不出意外的你将又一次得到下面的错误:

意思就是说 webpack 仍然无法识别图片类型的文件,如:.(png|jpg|jpeg|gif) 等,那么到了这里相信你灵光一闪,想到了需要使用 file-loader/url-loader,但在这我们不需要配置这两个 loader,因为我们使用的是 webpack5 ,是时候使用其中 资源模块(asset module) 的模块类型了.

配置 webpack 资源模块

废话不多说,直接上官方文档使用说明:

下面就是配置后的 webpack.config.js 内容:

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')module.exports = {entry: {path: './src/main.js',},module: {rules: [{test: /\.vue$/,use: 'vue-loader',},{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpe?g|gif)$/,type: 'asset/resource',generator: {filename: 'assets/img/[hash][ext]'}}],},output: {filename: 'assets/js/[name].[contenthash:6].js',path: path.resolve(__dirname, './dist'),},plugins: [new VueLoaderPlugin()]
}

这时候在通过 npm run dev 启动项目,发现终于没有报错了:

此时访问页面内容:

是不是会觉得

别慌问题不大,其实就是没有给 webpack 打包后的 js 代码指定模板.

为 webpack 指定模板

熟悉 webpack 的你肯定猜到要是用 html-webpack-plugin 插件,首先通过 npm install html-webpack-plugin -D 安装依赖,然后配置 webpack.config.js 文件:

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: {path: './src/main.js',},module: {rules: [{test: /\.vue$/,use: 'vue-loader',},{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpe?g|gif)$/,type: 'asset/resource',generator: {filename: 'assets/img/[hash][ext]'}}],},output: {filename: 'assets/js/[name].[contenthash:6].js',path: path.resolve(__dirname, './dist'),},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({template: path.resolve(__dirname, './index.html')})]
}

此时,在重新通过 npm run dev 启动项目并访问页面:

image.png

至此,终于成功配置了一个简单的基于 vue3webpack5 的项目.

优化配置文件

通过 F12 打开页面控制台,你会看到这么一段警告信息:

其中 __VUE_OPTIONS_API____VUE_PROD_DEVTOOLS__ 对应的值都是 Boolean 类型,分别代表的是:

  • __VUE_OPTIONS_API__:表示是否支持 options api 的写法,默认是 true
  • __VUE_PROD_DEVTOOLS__:表示生产包是否要继续支持 devtools 插件,默认是 false

即便它们都有默认值,可以不进行设置,但是 Vue 希望我们自己去设置这两个配置,毕竟如果完全拥抱 Vue3 的话,写法上没有必要在使用 options api 的格式,这样在打包的时候,包的体量上也会有所减少.

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require('webpack')module.exports = {entry: {path: './src/main.js',},module: {rules: [{test: /\.vue$/,use: 'vue-loader',},{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpe?g|gif)$/,type: 'asset/resource',generator: {filename: 'assets/img/[hash][ext]',},},],},output: {filename: 'assets/js/[name].[contenthash:6].js',path: path.resolve(__dirname, './dist'),},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({template: path.resolve(__dirname, './index.html'),}),new DefinePlugin({__VUE_PROD_DEVTOOLS__: false,__VUE_OPTIONS_API__: false,}),],
}

最后

首先通过 npm run build 查看打包后生成为目录结构:

image.png

目前存在的不足:

  • js 文件没有进行抽取,现在所有的 js 内容都会默认打包到 main.hash.js
  • css 样式相关的内容没有进行抽取,现在的样式全部以 <style></style> 标签的形式插入在 html 文件中
  • 没有对 css 进行兼容处理
  • 没有对 js 进行兼容处理
  • 没有很好的区分各个环境,如:开发、测试、生产

当然也有对应的处理方式:

  • 通过 webpackoptimization 选项配置,抽离对应的 js
  • 通过 mini-css-extract-plugin 插件来抽离对应的 css
  • 通过 postcsscss 进行处理
  • 通过 babeljs 进行处理
  • 针对公共配置部分进行抽取,或者通过环境变量去合成最终的配置项
  • ···

以上的这些就不在一一进行配置,在需要时在进行相应配置即可.

至此,我们成功的将基于 vite + vue3 项目转换成了基于 webpack5 + vue3 的项目.

相关文章:

webpack5 + vue3 从零配置项目

前言 虽然在实际项目当中很少会从 0 到 1 配置一个项目&#xff0c;毕竟很多重复工作是没有必要的&#xff0c;脚手架将这些重复性的工作进行了整合&#xff0c;方便开发者使用。也正因如此&#xff0c;导致部分开发者过于依赖脚手架&#xff0c;却不清楚其内部的实现流程&…...

Queuing 表(buffer表)的优化实践 | OceanBase 性能优化实践

案例问题描述 该案例来自一个金融行业客户的问题&#xff1a;他们发现某个应用对一个数据量相对较小的表&#xff08;仅包含数千条记录&#xff09;访问时&#xff0c;频繁遇到性能下降的情况。为解决此问题&#xff0c;客户向我们求助进行分析。我们发现这张表有频繁的批量插…...

./mysqld: error while loading shared libraries: libaio.so.1: cannot open sha

mysql:5.6 使用离线方式安装&#xff1a;rpm -ivh --nodeps mysql* &#xff0c;执行 systemctl start mysqld.service发现启动不了&#xff0c;通过vi /var/log/mysql.log看到如下关键字&#xff1a;libraries: libaio.so.1&#xff0c;之前也是按照网上帖子各种修改都没有解决…...

Qt主线程把数据发给子线程,主线程会阻塞吗

演示&#xff1a; #include <QCoreApplication> #include <QThread> #include <QObject> #include <QDebug>// 子线程类 class Worker : public QObject {Q_OBJECT public slots:void processData(int data) {qDebug() << "Processing dat…...

前后端、网关、协议方面补充

这里写目录标题 前后端接口文档简介前后端视角对于前端对于后端代码注册路由路由处理函数 关于httpGET/POST底层网络关于前端的获取 路由器网关路由器的IP简介公网IP(WAN IP)私网IP(LAN IP)无线网络IP(WIFI IP)查询路由器私网IP路由器公网IP LAN口与WIFI简介基本原理 手动配置电…...

如何在Mac上切换到JDK 17开发环境

在本文中&#xff0c;我将为您介绍如何在Mac上切换到JDK 17&#xff0c;包括下载和安装JDK 17、设置环境变量、在IntelliJ IDEA中配置项目、修改Maven编译配置&#xff0c;并最终使用mvn clean install重新编译项目。通过这个流程&#xff0c;您可以顺利地将开发环境升级到JDK …...

深入探索 TypeScript:从基础到高级特性

深入探索 TypeScript&#xff1a;从基础到高级特性 一、引言 在现代软件开发领域&#xff0c;TypeScript 已经成为了一种极具影响力的编程语言。它基于 JavaScript&#xff0c;并为其添加了强大的静态类型系统&#xff0c;使得代码在开发阶段就能进行更严格的类型检查&#x…...

Leetcode:118. 杨辉三角——Java数学法求解

题目——Leetcode:118. 杨辉三角 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2: 输入: numRow…...

SHELL脚本(Linux)

声明 学习视频来自 B 站UP主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 ✍&#x1f3fb;作者简介&#xff1a;致…...

单元测试、集成测试、系统测试、验收测试、压力测试、性能测试、安全性测试、兼容性测试、回归测试(超详细的分类介绍及教学)

目录 1.单元测试 实现单元测试的方法&#xff1a; 注意事项&#xff1a; 2.集成测试 需注意事项&#xff1a; 实现集成测试的方法&#xff1a; 如何实现高效且可靠的集成测试&#xff1a; 3.系统测试 实现系统测试的方法: 须知注意事项&#xff1a; 4.验收测试 实现验…...

低代码集成多方API的简单实现

在现代软件开发中&#xff0c;集成多个API服务提供商已成为常见需求。然而&#xff0c;不同的API认证机制和数据格式使得集成过程变得复杂且耗时。为了应对这些挑战&#xff0c;本文将介绍一种低代码解决方案&#xff0c;通过配置化管理和简化的代码逻辑&#xff0c;帮助开发者…...

【测试框架篇】单元测试框架pytest(1):环境安装和配置

一、pytest简介 Pytest是Python的一种单元测试框架&#xff0c;与Python自带的unittest测试框架类似&#xff0c;但是比 unittest框架使用起来更简洁&#xff0c;效率更高。 二、pytest特点 Pytest是一个非常成熟的Python测试框架,主要特点有以下几点&#xff1a; 非常容易…...

Python数据分析NumPy和pandas(二十九、其他Python可视化工具)

与其他开源工具一样&#xff0c;在 Python 中创建图形有很多选项&#xff08;太多了&#xff0c;无法一一列举&#xff09;。自 2010 年以来&#xff0c;主要开发工作集中在创建用于在 Web 上发布交互式图形上。例如&#xff1a; Altair、Bokeh 和 Plotly 等工具&#xff0c;可…...

Unity中HDRP设置抗锯齿

一、以前抗锯齿的设置方式 【Edit】——>【Project Settings】——>【Quality】——>【Anti-aliasing】 二、HDRP项目中抗锯齿的设置方式 在Hierarchy中——>找到Camera对象——>在Inspector面板上——>【Camera组件】——>【Rendering】——>【Pos…...

Spring Boot实现文件上传与OSS集成:从基础到应用

目录 前言1. 文件上传的基础实现1.1 前端文件上传请求1.2 后端文件接收与保存 2. 集成第三方OSS服务2.1 准备工作2.2 编写OSS集成代码2.3 修改Controller实现文件上传至OSS 3. 文件上传的扩展&#xff1a;多文件上传与权限控制结语 前言 随着互联网应用的快速发展&#xff0c;…...

Python学习26天

集合 # 定义集合 num {1, 2, 3, 4, 5} print(f"num&#xff1a;{num}\nnum数据类型为&#xff1a;{type(num)}") # 求集合中元素个数 print(f"num中元素个数为&#xff1a;{len(num)}") # 增加集合中的元素 num.add(6) print(num) # {1,2,3,4,5,6} # 删除…...

linux startup.sh shutdown.sh (kkFileView)

linux启动脚本和关闭脚本startup.sh shutdown.sh &#xff08;kkFileView&#xff09; startup.sh DIR_HOME("/opt/openoffice.org3" "/opt/libreoffice" "/opt/libreoffice6.1" "/opt/libreoffice7.0" "/opt/libreoffice7.1&q…...

[MySQL]隐式类型转换

安全等号 <> 如果有参数为NULL&#xff0c;则除了相等比较运算符()&#xff0c;比较的结果为null。对于 nullnull&#xff0c;结果为true。 在select语句中&#xff0c;使用 时&#xff0c;结果不会包含值为 null 的记录&#xff0c;但如果使用安全等号 <> 来…...

面经总结1

文章目录 如何保证批量请求失败&#xff0c;只弹出一个toast1使用计数器&#xff1a;2使用标志变量&#xff1a; 如何减少项目里的if-else1使用多态2使用策略模式3使用字典映射4使用状态模式 babel-runtime 作用是啥如何实现 PDF 预览和下载1浏览器内置PDF阅读器2使用PDF.js库3…...

Oracle19C AWR报告分析之Instance Efficiency Percentages (Target 100%)

Oracle19C AWR报告分析之Instance Efficiency Percentages 一、分析数据二、详细分析2.1 Instance Efficiency Percentages (Target 100%)各项指标及其解释2.2 分析和总结 一、分析数据 二、详细分析 在 Oracle AWR (Automatic Workload Repository) 报告中&#xff0c;每个性能…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...