webpack手动配置一个vue3项目

最新推荐文章于 2025-06-21 12:10:16 发布

自己瞎琢磨

最新推荐文章于 2025-06-21 12:10:16 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端综合文章标签： webpack 前端 javascript

本文链接：https://blog.youkuaiyun.com/huangfengnt/article/details/130723172

文章介绍了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