【vue3】webpack和vite介绍与使用【超详细】

这篇具有很好参考价值的文章主要介绍了【vue3】webpack和vite介绍与使用【超详细】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

构建工具

打包工具称为构建工具

  • 使用模块化开发主要面临两个问题:1.浏览器兼容性问题 2.模块化过多时,加载问题。
  • 使用构建工具,对代码进行打包,将多个模块打包成一个文件。这样一来及解决了兼容性问题,又解决了模块过多的问题
  • 作用:构建工具可以将我们使用esm规范编写的代码转换为旧的js语法(解决了兼容性问题)

1.webpack

webapck简介

webpack只负责项目打包,其他功能需要在webpack.config.js配置文件里进行设置。
webpack适用于大型,复杂的项目,它可以处理多种不同类型的文件,并根据需求进行转换,压缩,打包。webpack唯一不好的就是配置比较复杂,需要花费一定的时间和精力进行学习和调试。

webpack配置八大模块

  • Entry 必选项
    指定读取入口文件(项目开始的文件)

  • output 必选项
    配置代码打包后的地址
    打包后的.js就是普通的js文件,.mjs就是es模块的文件

  • mode webpack4以后必填

  • devServer 非必填
    开发模式配置

  • modules 非必填 loader编写的地方(用于预处理文件,文件加载器)
    使用css-loader可以处理js中的样式
    使用style-loader,让css样式生效
    编译ts,需要ts-loader
    编译vue,需要vue-loader
    使用babel-loader,将新的js语法转换为旧的js,以提高代码的兼容性。

  • plugins 非必填
    插件(**用于增强功能,扩展器 **)

  • optimization 非必填
    优化相关

  • resolve 非必填
    提供一些简化功能(别名,文件后缀名省略等等)
    https://www.webpackjs.com/configuration/resolve/

#安装识别css样式
#添加 -D表示开发依赖
yarn add style-loader css-loader -D
#添加 -D表示开发依赖
yarn add @babel/core  @babel/preset-env -D
#添加 -D表示开发依赖
#为webpack打包后的js指定模板
yarn add html-webpack-plugin -D
单入口--> runtime+vendor+核心业务+异步模块
多入口--> runtime+vendor+每个入口的核心业务代码+common

webpack.config.js配置文件

const minicss = require("mini-css-extract-plugin")
module.exports = {
	mode:"production",//none,development(开发模式),production(生产模式)
	entry:{
		app:"./app.js"//根据你的项目,自行配置入口文件
	},
	output:{
		path:__dirname+"/dist",
		chunkFilename: "[name].js",
		filename: 'assets/js/[name].[chunkhash:4].bundle.js',
	},
	optimization:{},
	devServer:{
		hot: true,  // 打开热更新开关
        historyApiFallback:true
	},
	resolve:{
		extensions: ['.vue','.js', '.ts', '.css'],
		alias: {
       	 "@": resolve("src"),
      	},
	},
	modelu:{
		rules:[
			//css样式
	            {
	                test:/\.css$/i,
	                use:[minicss.loader,"style-loader","css-loader"]
	            },
	            //图片生效
	            {
	                test: /\.(png|jpe?g|gif)$/,
	                type: 'asset/resource',
	                generator: {
	                    filename: 'assets/img/[hash][ext]'
	                }
	            },
	            {
	                test: /\.vue$/,
	                use: 'vue-loader'
	            },
	            //label把es6转为es5,兼容性
	            {
	                test: /\.less$/i,
	                use: [
	                    // compiles Less to CSS
	                    minicss.loader,
	                    'style-loader',
	                    'css-loader',
	                    'less-loader',
	                ],
	            },
	            {
	                test:/\.m?js$/,
	                exclude:/(node_modules|bower_components)/,
	                use:{
	                    loader:"babel-loader",
	                    options:{
	                        presets:["@babel/preset-env"]
	                    }
	                }
	            },
				//webpack的typeScript加载器
			     {
			        test: /\.(j|t)sx?$/,
			        exclude: /node_modules/,
			        use:[
			          'babel-loader',
			          {
			            loader: 'ts-loader',
			            options: {
			              appendTsSuffixTo: [/\.vue$/],// 重要
			              transpileOnly: true,// 重要 取消类型检测 直接进行编译
			              happyPackMode: false,
			            }
			          }
			        ]
			      }
			},
			//打包输出文件
		    output: {
		        filename: 'assets/js/[name].[contenthash:6].js',
		        path: path.resolve(__dirname, './dist')
		    },
		    //webpack扩展功能
		    plugins: [
		        new VueLoaderPlugin(),
		        //为webpack打包后的js指定模板
		        new HtmlWebpackPlugin({
		            template: path.resolve(__dirname, './public/index.html')
		        })
		        new minicss({
					filename:"test.bundle.css"
				}),
				new minimizer()
		    ],
		     optimization: {
			    //代码分割
			    splitChunks: {
			      chunks: "all",//all,async,initial
			      cacheGroups:{
			        vendor:{
			          test:/[\\/]node_modules[\\/]/,
			          filename: "vendor.[chunkhash:4].js",
			          chunks: "all",
			          minChunks: 1
			        },
			        common:{
			          filename: "common.[chunkhash:4].js"
			          chunks: "all",
			          miniChunks:2,//重复出现2次以上,拆分为独立的模块
			          minSize: 0//大于0byte文件才拆分出来
			        }
			      }
			    },
			    runtimeChunk: {//运行时的chunk文件
			      name:"runtime"
			    }
			  },
		    devServer: {
		         hot: true,  // 打开热更新开关
    			 historyApiFallback:true
		    },
		]
	}
}
  • devtool
devtool:"inline-source-map" //设置代码映射,查看源码,方便调试

webpack配置项技巧

  • 1.require.context(批量引入指定文件夹下的所有文件)
  • 2.resolve
    2.1 alias-别名,提供路径的简写
    2.2 Extensions-扩展省略,定义可省略的扩展名

webpack的package.json配置

  • package.json
    devDependencies 项目开发时用的(开发依赖)
    dependencies项目依赖
{
  "name": "沉默小管",//项目名称
  "version": "0.0.1",//版本
  "description": "沉默小管",//项目描述
  "author": "沉默小管",//作者
  "license": "MIT",
  "scripts": {//运行脚本
    "watch": "webpack --watch",
    "dev": "webpack server --open --mode=development",
    "build": "webpack --mode=production"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
  "keywords": [],//项目关键词
  "dependencies": {},//项目依赖
  "devDependencies": { },//开发时依赖
  "engines": {//启动引擎版本
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [//设置兼容列表
    "> 1%",
    "last 2 versions"
  ]
}

2.vite

相较于webpack,vite采用了不同的运行方式。开发时,并不对代码打包,而是直接采用ES模块的方式来运行项目。在项目部署时,再对项目进行打包。他比webpack少了分析依赖关系的环节。因此,vite的开发速度更快,也适合小型,简单的项目。

  • 基本使用
    1.安装开发依赖vite
    2.vite的源码目录就是项目根目录
    3.开发命令:
    vite 启动开发服务器
    vite build打包代码
    vite preview 浏览打包后代码

未完待续…

踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教文章来源地址https://www.toymoban.com/news/detail-729009.html

到了这里,关于【vue3】webpack和vite介绍与使用【超详细】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3+Vite+TypeScript常用项目模块详解

      目录 1.Vue3+Vite+TypeScript 概述 1.1 vue3  1.1.1 Vue3  概述 1.1.2 vue3的现状与发展趋势 1.2 Vite 1.2.1 现实问题 1.2 搭建vite项目 1.3 TypeScript 1.3.1 TypeScript 定义 1.3.2 TypeScript 基本数据类型  1.3.3 TypeScript语法简单介绍 2. 项目配置简单概述 2.1 eslint 校验代码工具配置 2.1.1 eslint定义 2.1.2 esl

    2024年02月08日
    浏览(42)
  • Vite4+Typescript+Vue3+Pinia 从零搭建(3) - vite配置

    项目代码同步至码云 weiz-vue3-template 关于vite的详细配置可查看 vite官方文档,本文简单介绍vite的常用配置。 项目初建后, vite.config.ts 的默认内容如下: 比如,修改 App.vue : 根目录下新建 .env 、 .env.development 、 .env.production 三个文件。 .env 文件内新增内容: .env.development 文件内

    2024年02月05日
    浏览(105)
  • Vue3 + Vite + TypeScript + dataV 打造可视化大屏

    网上有许多开源的可视化大屏项目,但是分析之后,还是想自己从 0 搭建一个可视化大屏项目,毕竟 Vue 一直在更新,自己搭建的可以使用最新版本的 Vue ,如果对版本没有太多要求的小伙伴们选择那些开源项目的基础上去修改也是很不错的。其次自己搭建一个项目,可以更好

    2024年02月03日
    浏览(46)
  • nginx vue2+webpack 和 vue3+vite 配置二级目录访问

    我们开发中会遇到这样的需求,让我们用服务器nginx部署一个用域名的二级目录来访问项目 https:xxx/二级目录/ 来放访问项目 目录 思路 1、nginx配置(vue2 和 vue3配置的nginx相同) 2、vue2+webpack的配置 (1)vue.config.js配置 (2)router配置 3、vue3+vite的配置 (1)vite.config.js配置 (

    2024年02月09日
    浏览(58)
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架

    项目代码以上传至码云,项目地址:https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold 近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台系统,开发者基于此项目进行裁剪和扩展来完成自己的功能开发。但前台系统花样繁多

    2024年01月20日
    浏览(63)
  • Vue3 + Vite2 + TypeScript4搭建企业级项目框架

    1. 创建项目 使用命令行工具进入到你想要创建项目的目录,然后执行以下命令: 这将会创建一个新的项目文件夹和一个 package.json 文件。 2. 安装依赖 接下来你需要在项目中安装 Vue、Vite、TypeScript 和其他需要的依赖。执行以下命令: 以上命令会安装最新的 Vue、Vite 和 TypeSc

    2024年02月08日
    浏览(64)
  • Vite4+Typescript+Vue3+Pinia 从零搭建(4) - 代码规范

    项目代码同步至码云 weiz-vue3-template 要求代码规范,主要是为了提高多人协同和代码维护效率,结合到此项目,具体工作就是为项目配置 eslint 和 prettier 。 安装 EditorConfig for VS Code 插件,根目录下新建 .editorconfig 文件,增加以下配置 如果是非windows系统, end_of_line 设置为 cr 安

    2024年02月05日
    浏览(104)
  • Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router

    项目代码同步至码云 weiz-vue3-template Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。 在 src/view 下新建 home.vue 和 login.vue ,内容如下: login.vue 里修改下对应name即可 index.ts 作为路由入口, static.ts 作为静态路由, modules 内还可以

    2024年02月05日
    浏览(70)
  • Vite4+Typescript+Vue3+Pinia 从零搭建(2) - ts配置

    项目代码同步至码云 weiz-vue3-template 关于tsconfig的配置字段可查看其他文档,如 typeScript tsconfig配置详解 文件修改如下: 修改文件如下: 新建文件夹 types ,用来存放类型定义。比如新建 index.d.ts : 后续也可以新增其他文件,比如 global.d.ts 存放全局定义, router.d.ts 存放路由定

    2024年02月05日
    浏览(87)
  • Vite4+Typescript+Vue3+Pinia 从零搭建(7) - request封装

    项目代码同步至码云 weiz-vue3-template 基于 axios 封装请求,支持多域名请求地址 utils 目录下新建 request 文件夹,并新建 index.ts 、 request.ts 和 status.ts 文件。 此时,eslint会报 switch 前面的空格错误,需要修改 .eslintrc.cjs 里的 indent ,修改后,错误消失。 src 目录下新建 api 文件夹,

    2024年02月04日
    浏览(94)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包