【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
1
2
3

#添加 -D表示开发依赖
yarn add @babel/core  @babel/preset-env -D
1
2

#添加 -D表示开发依赖
#为webpack打包后的js指定模板
yarn add html-webpack-plugin -D
1
2
3

单入口--> runtime+vendor+核心业务+异步模块
多入口--> runtime+vendor+每个入口的核心业务代码+common
1
2

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",//__dirname当前路径下的绝对路径
		chunkFilename: "[name].js",
		filename: 'assets/js/[name].[chunkhash:4].bundle.js',//[chunkhash:4]前4位  [name]app名
	},
	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:{
	                    	//告诉babel-leader采用presets:["@babel/preset-env"]规范进行编译。不然就会编译失效
	                    	//presets对象可以写在当前对象文件中或者可以写进项目根目录的.babelrc文件里，不过需要注意的是，是要以对象的形式写进去
	                        presets:[
	                        "@babel/preset-env"，
	                        {
								targets:{//编译目标
									browsers:[
									">1%",//支持大于百分之一的浏览器
									"last 2 version",//支持厂商浏览器最后两个版本
									"not ie<=8",//不支持小于ie8以下的
									]
								}
							}
							]
	                    }
	                }
	            },
				//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
		    },
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

多入口写法与当入口写法

//多入口写法
module.exports = {
	...
	entry:{
		app:"./app.js",
		app1:"./app1.js"
	}
}

//单入口写法
module.exports = {
	...
	entry:"./app.js"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• devtool

devtool:"inline-source-map" //设置代码映射，查看源码，方便调试
1

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"
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2.vite

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

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

未完待续…

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

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

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

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

🔥 $技术交流QQ群：837051545$

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

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

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

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