Vue3学习-webpack-demo

webpack-demo

一、下载对应的插件

1.1

• 1.下载内容
  • webpack
  • webpack-cli
  • webpack-dev-server 启动dev服务
• 2. 下载webpack相关的plugin插件
  • html-webpack-plugin html模板
  • clean-webpack-plugin
  • friendly-errors-webpack-plugin 美化webpack控制台的错误打印信息
• 3. 下载webpack相关的loader处理各种类型的文件
  • vue-loader@next
  • @vue/compiler-sfc 解析.vue文件
  • css-loader 处理css文件
  • style-loader 处理style样式
  • less
  • less-loader 处理less文件
  • typescript
  • ts-loader 处理ts文件
• 4.下载vue项目相关的插件
  • vue

二、性能

2.1 lightHouse 跑分（google的devtool）,分析网页的性能

• FCP(First Contentful Paint) 首屏加载时间
  首次内容绘制时间，浏览器第一次绘制Dom相关的内容，也是用户第一次看到页面内容的时间。
  • 还有其他的参数；

2.2 打包之后的分析

• vite项目：pnpm add rollup-plugin-visualizer
• webpack：webpack-bundle-之类的

三、具体的内容

webpack.config.js（webpack5）

/**
 * webpack 是基于node环境的，所以是使用commonjs语法
 */
const { Configuration } = require("webpack");
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
// 我去，这就叫使用注解的方式，在我们打印entry的时候，就有想对应的只能提示了？？
/**
 * @type {Configuration}
 */
const config = {
	mode: "development",
	entry: "./src/main.ts",
	output: {
		filename: "[hash].js",
		path: path.resolve(__dirname, "dist"),
	},
	resolve: {
		alias: {
			// 设置别名
			"@": path.resolve(__dirname, "./src"),
		},
		// 设置后缀
		extensions: [".vue", ".ts", ".js"],
	},
	module: {
		rules: [
			{
				test: /\.vue$/, //解析vue 模板
				use: "vue-loader",
			},
			{
				test: /\.css$/, //解析vue 模板
				use: ["style-loader", "css-loader"],
			},
			{
				test: /\.less$/, //解析 less
				use: ["style-loader", "css-loader", "less-loader"],
			},
			{
				test: /\.ts$/, //解析ts
				loader: "ts-loader",
				options: {
					configFile: path.resolve(process.cwd(), "tsconfig.json"),
					appendTsSuffixTo: [/\.vue$/],
				},
			},
		],
	},
	stats: "errors-only", //取消终端累赘的提示
	devServer: {
		// port: 9000,
		open: false,
		// proxy:{}
	},
	plugins: [
		new htmlWebpackPlugin({
			template: "./public/index.html", //html模板
		}),
		new CleanWebpackPlugin(), //打包清空dist
		new VueLoaderPlugin(), //解析vue
		new FriendlyErrorsWebpackPlugin({
			compilationSuccessInfo: {
				//美化样式
				messages: ["You application is running here http://localhost:8080"],
			},
		}),
	],
	externals: {
		vue: "Vue", // 不会将Vue包打入，会进行cdn引入？减少打包体积
		// 需要进行cdn引入，会优先请求cdn，如果网络不好，白屏会更严重；
		// 后面还有分包
	},
};
module.exports = config;

package .json

{
	"main": "webpack.config.js",
	"scripts": {
		"dev": "webpack-dev-server",
		"build": "webpack"
	},
	"dependencies": {
		"@vue/compiler-sfc": "^3.2.47",
		"clean-webpack-plugin": "^4.0.0",
		"css-loader": "^6.7.3",
		"friendly-errors-webpack-plugin": "^1.7.0",
		"html-webpack-plugin": "^5.5.0",
		"less": "4.0.0",
		"less-loader": "^11.1.0",
		"style-loader": "^3.3.1",
		"ts-loader": "^9.4.2",
		"typescript": "^4.9.5",
		"vue": "^3.2.47",
		"vue-loader": "^17.0.1",
		"webpack": "^5.75.0",
		"webpack-cli": "^5.0.1",
		"webpack-dev-server": "^4.11.1"
	}
}