【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 浏览打包后代码

未完待续…

踩坑不易,还希望各位大佬支持一下 \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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

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

你可能感兴趣的:(vueCms,vue,typescript,webpack,前端,node.js)