感觉学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