webpack手动配置一个vue3项目

文章介绍了webpack和vite的主要功能,如代码压缩、打包优化和本地服务器的热重载,以及项目配置的关键点,包括npm包管理、依赖区分、Babel转换和webpack配置。作者强调理解基础流程的重要性,并提供了一步步配置项目的概述。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

感觉学webpack和vite比登天还难啊,所以只是止步于能用和一些基础的配置比如proxy等等。因为自己是看培训班视频入的门,有些东西不是非常清楚(话说清楚了不还是个前端),关于如何拓展自己的职业宽度,每个人有自己的想法,个人认为可以心安理得地依赖于脚手架的相关配置。但是有些基础流程还是要懂的。我会以一个门外汉的角度去描述项目搭建的过程(本来也就是个门外汉)

一、webpack和vite这类的工具到底干了啥

首先是压缩你的js代码,压缩成你看不懂的一坨。

其次它能让你自己配置如何打包,也就是代码分离,比如两个js文件都依赖a.js,难道还要引入两次a.js,那肯定是打包到一个共同的依赖里面。

都是为了尽量减小打包后文件的大小,文件小就是速度快。

最后,它还给你了一个本地服务器,打包后的效果直接在本地呈现,并且还实现了热重载(打包一次呈现一次,不用每次修改之后都重新打开服务器),当然这个服务器还可以帮你做跨域,开发期间转发你的请求(服务器之间通信不必遵守同源策略)

以上就是我一个门外汉的理解。

二、配置一个项目究竟要考虑些什么

1.npm的使用

npm就是个包管理,你要通过npm去引用网上下载来的包,比如vue等等,各种loader也是通过npm下载的,可能最常见的命令就是npm install,然后最常见的两个生成的文件就是package.json、package-lock.json。

前者就是一个包目录,记着你下载了哪些东西的json大对象,下面是我这个项目配置好的package.json

{
  "name": "wp_for_vue",
  "version": "1.0.0",
  "description": "vue多页面打包时间",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --progress --config ./webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.1",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "style-loa
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值