webpack从零到1 构建 vue3

news2024/12/30 2:31:30

为什么要手写webpack 不用cli （无的放矢）并不是 其实是为了加深我们对webpack 的了解方便以后灵活运用webpack 的技术

  1. 初始化项目结构（跟cli 结构保持一致）
    • 新建 public src 等文件夹
    • npm init -y 创建package.json文件
    • tsc --init 创建 tsconfig.json 文件
      注：如果没有tsc的话 终端执行 npm install typescript -g 命令然后再执行 tsc --init 命令
  2. 然后在 src文件夹下 创建以下文件
    在这里插入图片描述

3.在public 文件夹下创建 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack demo</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>
  1. 在根目录下创建 webpack.config.js 文件 然后在终端执行以下命令
pnpm add webpack
pnpm add webpack-cli // 如果webpack 是3以上的版本 需要再配套安装
// 启动 dev 的环境
pnpm add webpack-dev-server
// html 模板
pnpm add html-webpack-plugin 
// 安装vue
pnpm add vue

5.webpack.config.js 文件

const { Configuration } = require("webpack"); // 智能提示
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
/**
 * @type {Configuration}
 */
const config = {
	mode: "development",
	entry: "./src/main.ts", // 入口文件
	output: {
		// 出口文件 打完包出口在哪
		filename: "[hash].js",
		path: path.resolve(__dirname, "dist"),
	},
	plugins: [
		new htmlWebpackPlugin({
			template: "./public/index.html",
		}),
	],
};
module.exports = config;

注：想在webpack.config.js 文件中获得智能提示 需要 以下代码

const { Configuration } = require("webpack"); // 智能提示
/**
  @type {Configuration}
 */
  1. 修改 main.ts文件
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
  1. 在src 文件夹下新建 env.d.ts 文件
    配置vue生命文件不然ts 识别不了vue后缀
 
declare module "*.vue" {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
  }
  1. 安装 loader 解析sfc
pnpm add vue-loader@next //解析vue
pnpm add @vue/compiler-sfc //解析vue文件
  1. 配置webpack.config.js 文件
    const { VueLoaderPlugin } = require(‘vue-loader/dist/index’);
    然后再plugins里注册下
    new VueLoaderPlugin(), //解析vue
const { Configuration } = require("webpack"); // 智能提示
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
/**
 * @type {Configuration}
 */
const config = {
	mode: "development",
	entry: "./src/main.ts", // 入口文件
	module: {
		rules: [
			{
				test: /\.vue$/, //解析vue 模板
				use: "vue-loader",
			},
		],
	},
	output: {
		// 出口文件 打完包出口在哪
		filename: "[hash].js",
		path: path.resolve(__dirname, "dist"),
	},
	plugins: [
		new htmlWebpackPlugin({
			template: "./public/index.html",
		}),
		new VueLoaderPlugin(), //解析vue
	],
};
module.exports = config;

  1. 打包的时候清空dist 就不用做手动删除了
    pnpm add clean-webpack-plugin

  2. 配置别名 @ 代表src
    修改 webpack.config.js 文件 进行别名 添加 resolve 属性

const { Configuration } = require("webpack"); // 智能提示
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
/**
 * @type {Configuration}
 */
const config = {
	mode: "development",
	entry: "./src/main.ts", // 入口文件
	module: {
		rules: [
			{
				test: /\.vue$/, //解析vue 模板
				use: "vue-loader",
			},
		],
	},
	output: {
		// 出口文件 打完包出口在哪
		filename: "[hash].js",
		path: path.resolve(__dirname, "dist"),
	},
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "src"),
		},
		extensions: [".vue", ".ts", ".js"], // 自动补全后缀
	},
	plugins: [
		new htmlWebpackPlugin({
			template: "./public/index.html",
		}),
		new VueLoaderPlugin(), //解析vue
	],
};
module.exports = config;
  1. 安装插件解析css 并配置webpack.config.json
    pnpm add css-loader 解析css 文件
    pnpm add style-loader 解析 css 样式
    也可以安装 less、scss
    pnpm add less
    pnpm add less-loader
    配置 webpack.config.json 文件
const { Configuration } = require("webpack"); // 智能提示
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
/**
 * @type {Configuration}
 */
const config = {
	mode: "development",
	entry: "./src/main.ts", // 入口文件
	module: {
		rules: [
			{
				test: /\.vue$/, //解析vue 模板
				use: "vue-loader",
			},
			{
				test: /\.css$/, //解析css
				use: ["style-loader", "css-loader"],
			},
			{
				test: /\.less$/, //解析 less
				use: ["style-loader", "css-loader", "less-loader"],
			},
		],
	},
	output: {
		// 出口文件 打完包出口在哪
		filename: "[hash].js",
		path: path.resolve(__dirname, "dist"),
	},
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "src"),
		},
		extensions: [".vue", ".ts", ".js"], // 自动补全后缀
	},
	plugins: [
		new htmlWebpackPlugin({
			template: "./public/index.html",
		}),
		new VueLoaderPlugin(), //解析vue
	],
};
module.exports = config;
  1. 识别ts
pnpm add typescript
pnpm add ts-loader

修改webpack.config.js

const { Configuration } = require("webpack"); // 智能提示
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
/**
 * @type {Configuration}
 */
const config = {
	mode: "development",
	entry: "./src/main.ts", // 入口文件
	module: {
		rules: [
			{
				test: /\.vue$/, //解析vue 模板
				use: "vue-loader",
			},
			{
				test: /\.css$/, //解析css
				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$/],
				},
			},
		],
	},
	output: {
		// 出口文件 打完包出口在哪
		filename: "[hash].js",
		path: path.resolve(__dirname, "dist"),
	},
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "src"),
		},
		extensions: [".vue", ".ts", ".js"], // 自动补全后缀
	},
	plugins: [
		new htmlWebpackPlugin({
			template: "./public/index.html",
		}),
		new VueLoaderPlugin(), //解析vue
	],
};
module.exports = config;
  1. 美化webpack 控制台日志的
    pnpm add friendly-errors-webpack-plugin
const { Configuration } = require("webpack"); // 智能提示
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
/**
 * @type {Configuration}
 */
const config = {
	mode: "development",
	entry: "./src/main.ts", // 入口文件
	module: {
		rules: [
			// 处理文件
			{
				test: /\.vue$/, //解析vue 模板
				use: "vue-loader",
			},
			{
				test: /\.css$/, //解析css
				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$/],
				},
			},
		],
	},
	output: {
		// 出口文件 打完包出口在哪
		filename: "[hash].js",
		path: path.resolve(__dirname, "dist"),
	},
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "src"),
		},
		extensions: [".vue", ".ts", ".js"], // 自动补全后缀
	},
	stats: "errors-only", // 去掉一些没有用的提示
	plugins: [
		// 只要放在plugins里面都是插件
		new htmlWebpackPlugin({
			template: "./public/index.html",
		}),
		new VueLoaderPlugin(), //解析vue
		new FriendlyErrorsWebpackPlugin({
			compilationSuccessInfo: {
				messages: ["you this hear:http://localhost:8080"],
			},
		}),
	],
};
module.exports = config;
  1. 配置 devServer 可修改端口 指定地址等
const { Configuration } = require("webpack"); // 智能提示
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
/**
 * @type {Configuration}
 */
const config = {
	mode: "development",
	entry: "./src/main.ts", // 入口文件
	module: {
		rules: [
			// 处理文件
			{
				test: /\.vue$/, //解析vue 模板
				use: "vue-loader",
			},
			{
				test: /\.css$/, //解析css
				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$/],
				},
			},
		],
	},
	output: {
		// 出口文件 打完包出口在哪
		filename: "[hash].js",
		path: path.resolve(__dirname, "dist"),
	},
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "src"),
		},
		extensions: [".vue", ".ts", ".js"], // 自动补全后缀
	},
	devServer: {
		port: 9001,
	},
	stats: "errors-only", // 去掉一些没有用的提示
	plugins: [
		// 只要放在plugins里面都是插件
		new htmlWebpackPlugin({
			template: "./public/index.html",
		}),
		new VueLoaderPlugin(), //解析vue
		new FriendlyErrorsWebpackPlugin({
			compilationSuccessInfo: {
				messages: ["you this hear:http://localhost:8080"],
			},
		}),
	],
};
module.exports = config;
  1. externals 性能优化
const { Configuration } = require("webpack"); // 智能提示
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
/**
 * @type {Configuration}
 */
const config = {
	mode: "development",
	entry: "./src/main.ts", // 入口文件
	module: {
		rules: [
			// 处理文件
			{
				test: /\.vue$/, //解析vue 模板
				use: "vue-loader",
			},
			{
				test: /\.css$/, //解析css
				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$/],
				},
			},
		],
	},
	output: {
		// 出口文件 打完包出口在哪
		filename: "[hash].js",
		path: path.resolve(__dirname, "dist"),
	},
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "src"),
		},
		extensions: [".vue", ".ts", ".js"], // 自动补全后缀
	},
	devServer: {
		port: 9001,
	},
	stats: "errors-only", // 去掉一些没有用的提示
	plugins: [
		// 只要放在plugins里面都是插件
		new htmlWebpackPlugin({
			template: "./public/index.html",
		}),
		new VueLoaderPlugin(), //解析vue
		new FriendlyErrorsWebpackPlugin({
			compilationSuccessInfo: {
				messages: ["you this hear:http://localhost:8080"],
			},
		}),
	],
	externals: {
		vue:'Vue'
	}
};
module.exports = config;

最终的 package.json 包详解

{
    "name": "webpack-vue",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@vue/compiler-sfc": "^3.2.38", //解析vue文件
        "clean-webpack-plugin": "^4.0.0", //打包 的时候清空dist
        "css-loader": "^6.7.1", //处理css文件
        "friendly-errors-webpack-plugin": "^1.7.0", //美化dev
        "html-webpack-plugin": "^5.5.0", //html 模板
        "less": "^4.1.3",  //处理less
        "less-loader": "^11.0.0", //处理less文件
        "style-loader": "^3.3.1", //处理style样式
        "ts-loader": "^9.3.1", //处理ts
        "typescript": "^4.8.2", //ts
        "vue": "^3.2.38", //vue
        "vue-loader": "^17.0.0", //解析vue
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.10.0"
    }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1655147.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

量化教程3---miniqmt当作第三方库设置，提供源代码

量化教程3---miniqmt当作第三方库设置，提供源代码

qmt提供了大qmt和miniqmt&#xff0c;大qmt在平台使用&#xff0c;miniqmt提供了交易的api和数据可以本地使用&#xff0c;非常的方便&#xff0c;合适自己开发大型的策略&#xff0c;本地还可以访问其他数据&#xff0c;网络等&#xff0c;也支持服务器 以前的教程 qmt教程1…
阅读更多...
电脑怎么压缩视频？win端、Mac端压缩工具分享~

电脑怎么压缩视频？win端、Mac端压缩工具分享~

我们经常需要处理和分享视频文件。然而&#xff0c;视频文件往往会占用大量的存储空间&#xff0c;特别是高分辨率和高质量的视频。为了方便存储和分享&#xff0c;我们常常需要将视频文件进行压缩。本文将介绍如何使用电脑系统win端或Mac端自带的视频编辑器、以及常用的剪辑软…
阅读更多...
树莓派配置双网卡分别为AD HOC和AP模式

树莓派配置双网卡分别为AD HOC和AP模式

树莓派配置双网卡分别为AD HOC和AP模式 需求说明&#xff1a;为了实现分级网络管理&#xff0c;将多个无人机分簇&#xff0c;簇间使用AD HOC进行无中心自组织的网络&#xff0c;簇内使用AP-AC模式进行中心化网络。因此&#xff0c;需要配置一台设备&#xff0c;同时完成AD HOC…
阅读更多...
初识指针（3）＜C语言＞

初识指针（3）＜C语言＞

前言 前面两篇文章已经介绍了一些关于指针的基础知识&#xff0c;下面我们可以涉及一些指针较容易混淆的概念&#xff0c;本篇文章将介绍数组名的理解、指针输入打印数组的不同格式、一维数组传参的本质&#xff0c;冒泡排序&#xff0c;二级指针&#xff0c;指针数组等。 数组…
阅读更多...
【BST】Behavior Sequence Transformer for E-commerceRecommendation in Alibaba

【BST】Behavior Sequence Transformer for E-commerceRecommendation in Alibaba

一、提出背景 传统的Embedding&MLP模型结构将原始特征嵌入到低维向量中&#xff0c;然后将其concat后输入MLP进行最终推荐。DIN提出使用注意力机制来捕获候选项与用户先前点击的项之间的相似性。 然而&#xff0c;大多数这些工作只是连接不同的特征&#xff0c;而没有捕获用…
阅读更多...
如何在您的域名中使用 Google Apps 创建 SPF 记录

如何在您的域名中使用 Google Apps 创建 SPF 记录

关于 SPF 记录 SPF 记录是一种域名服务&#xff08;DNS&#xff09;记录&#xff0c;用于标识哪些邮件服务器被允许代表您的域发送电子邮件。它与在您的 DNS 区域中添加 MX 或 A 记录一样简单。 为什么它很重要&#xff1f; 如今&#xff0c;几乎所有滥用电子邮件消息都携带…
阅读更多...
AMBA总线介绍

AMBA总线介绍

AMBA&#xff08;Advanced Microcontroller Bus Architecture&#xff09;是由ARM&#xff08;Advanced RISC Machines&#xff09;公司设计的一种高性能、高带宽的总线架构。AMBA总线广泛应用于各种嵌入式系统中&#xff0c;包括数字信号处理器、图形处理器、嵌入式处理器以及…
阅读更多...
泽众财务RPA机器人常见五个应用场景

泽众财务RPA机器人常见五个应用场景

泽众RPA&#xff08;即机器人流程自动化&#xff0c;Robotic Process Automation, RPA&#xff09;解决方案是依托于各类先进信息技术手段的虚拟劳动力 &#xff08;数字劳动力&#xff09;&#xff0c;根据预先设定的程序操作指令对任务进行自动化处理&#xff0c;实现业务流程…
阅读更多...
QGraphicsView实现简易地图11『指定层级-定位坐标』

QGraphicsView实现简易地图11『指定层级-定位坐标』

前文链接&#xff1a;QGraphicsView实现简易地图10『自适应窗口大小』 提供一个地图初始化函数&#xff0c;指定地图显示的中心点和地图缩放层级 能够让地图显示某一层级的瓦片&#xff0c;并将中心点坐标显示在视图中心。 1、动态演示效果 7级地图-大连-老虎滩 定位到 8级地图…
阅读更多...
【Shell】shell编程之条件语句

【Shell】shell编程之条件语句

目录 一、条件测试操作 1.test命令 2.文件测试 3.整数值比较 4.字符串比较 5.逻辑测试 二、if语句的结构 1.单分支结构 2.双分支结构 3.多分支结构 三、case语句 总结 一、条件测试操作 1.test命令 测试表达式是否成立&#xff0c;若成立返回0&#xff0c;否则返回…
阅读更多...
Apache DolphinScheduler 4月简报：社区发展与技术革新速递

Apache DolphinScheduler 4月简报：社区发展与技术革新速递

各位热爱 DolphinScheduler 的小伙伴们&#xff0c;4 月份的 DolphinScheduler 社区月报更新啦&#xff01;这里将记录 DolphinScheduler 社区每月的重要更新&#xff0c;欢迎关注&#xff01; 月度 Merge 之星 感谢以下小伙伴 4 月为 Apache DolphinScheduler 所做的精彩贡献…
阅读更多...
Graph RAG：基于知识图谱的检索增强技术与优势对比

Graph RAG：基于知识图谱的检索增强技术与优势对比

身处信息爆炸时代&#xff0c;如何从海量信息中获取准确全面的搜索结果&#xff0c;并以更直观、可读的方式呈现出来是大家期待达成的目标。传统的搜索增强技术受限于训练文本数量、质量等问题&#xff0c;对于复杂或多义词查询效果不佳&#xff0c;更无法满足 ChatGPT 等大语言…
阅读更多...
spark sql 与scala混合开发实现数据入mongodb

spark sql 与scala混合开发实现数据入mongodb

目录 概述资源解决问题效果环境配置相关包关键代码 测试测试结果 概述 在此提供 spark sql 与scala混合开发实现数据入mongodb 相关思路 将部分重复性功能进行通用化(使用SQL与Scala混合开发模式)。 相关组件 hadoop 3.3.6 spark 3.4.2 kyuubi 1.8.0 基于上术组件开发 资源 …
阅读更多...
【笔试训练】day22

【笔试训练】day22

1.添加字符 求最少不相等的位数&#xff0c;可以先求最多相等的位数。 在添加字符之前&#xff0c;A和B最多相等的位数是多少&#xff1f;由于A后面可以添加字符&#xff0c;也就使得A字符可以在B的任意一个位置开始比较。遍历一遍这个比较的起点&#xff0c;从这个起点开始跟…
阅读更多...
Angular中的路由

Angular中的路由

Angular中的路由 文章目录 Angular中的路由前言一、创建路由二、创建多个组件路由三、创建子路由四、创建多个组件子路由 前言 在Angular中&#xff0c;路由是用于在不同的视图和组件之间导航的机制。Angular提供了一种强大的路由机制来管理单页应用&#xff08;SPA&#xff0…
阅读更多...
Npm Install Docusaurus Demo【npm 安装 docusaurus 实践 】

Npm Install Docusaurus Demo【npm 安装 docusaurus 实践 】

文章目录 1. 简介2. 前提2.1 安装 git2.2 安装 node 3. 安装4. 项目结构5. 访问5.1 localhost 访问5.2 ip 访问 1. 简介 Docusaurus 是一个facebook的开源项目&#xff0c;旨在帮助开发者构建易于维护和部署的文档网站。它提供了一个简单的方法来创建专业的文档网站&#xff0…
阅读更多...
asp.net结课作业中遇到的问题解决3

asp.net结课作业中遇到的问题解决3

目录 1、想实现不止鼠标滑过就显示图片&#xff0c;初始化状态下也可以显示图片&#xff0c;且每个图片还会自动变化&#xff0c;该如何实现 2、 同一个项目下的网页之间可以直接在地址栏输入跳转到阅读界面从而实现在这个跳转&#xff0c;那么如何防止这种现象呢&#xff1f;…
阅读更多...
python数据分析——pandas DataFrame基础知识1

python数据分析——pandas DataFrame基础知识1

参考资料&#xff1a;活用pandas库 1、加载数据集 通常调用read_csv函数来加载CSV数据文件。若是.tsv文件也是用read_csv函数。 # 导入库 import pandas as pd # 默认情况下&#xff0c;read_csv函数会读取逗号分隔文件 # Gapminder数据使用制表符分隔 # 可以吧sep参数设置为…
阅读更多...
计算机组成原理网课笔记

计算机组成原理网课笔记

无符号整数的表示与运算 带符号整数的表示与运算 原反补码的特性对比 移码
阅读更多...
推荐非常方便的初始配置nginx的开源工具

推荐非常方便的初始配置nginx的开源工具

官网 https://www.digitalocean.com/community/tools/nginx?global.app.langzhCN直接复制base64字符串在 /etc/nginx 目录执行&#xff0c;会自动生成配置文件&#xff0c;最后执行 使用tar解压新的压缩配置 tar -xzvf nginxconfig.io-xxx.com.tar.gz | xargs chmod 0644在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023