【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"]
	                    }
	                }
	            },
	            {
	                test:/\.tsx?$/,
	                loader:"ts-loader",
	                options: {
	                    configFile: path.resolve(process.cwd(), 'tsconfig.json'),
	                    appendTsSuffixTo: [/\.vue$/]
	                },
	            }
			},
			//打包输出文件
		    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 浏览打包后代码

未完待续…

✨$踩坑不易，还希望各位大佬支持一下$

$个人主页：$ 沉默小管

$个人网站：$ 沉默小管

$个人导航网站：$ 沉默小管导航网

$我的开源项目：$ vueCms.cn

$技术交流QQ群：837051545$

$点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教