webpack从零到1 构建 vue3

server/2024/11/13 9:05:27/

为什么要手写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

javascript"><!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 文件 然后在终端执行以下命令
javascript">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 文件

javascript">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 文件中获得智能提示 需要 以下代码

javascript">const { Configuration } = require("webpack"); // 智能提示
/**@type {Configuration}*/
  1. 修改 main.ts文件
javascript">import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
  1. 在src 文件夹下新建 env.d.ts 文件
    配置vue生命文件不然ts 识别不了vue后缀
javascript"> 
declare module "*.vue" {import { DefineComponent } from "vue"const component: DefineComponent<{}, {}, any>export default component}
  1. 安装 loader 解析sfc
javascript">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
javascript">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 属性

javascript">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 文件
javascript">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$/, //解析cssuse: ["style-loader", "css-loader"],},{test: /\.less$/, //解析 lessuse: ["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
javascript">pnpm add typescript
pnpm add ts-loader

修改webpack.config.js

javascript">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$/, //解析cssuse: ["style-loader", "css-loader"],},{test: /\.less$/, //解析 lessuse: ["style-loader", "css-loader", "less-loader"],},{test: /\.ts$/, //解析tsloader: "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
javascript">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$/, //解析cssuse: ["style-loader", "css-loader"],},{test: /\.less$/, //解析 lessuse: ["style-loader", "css-loader", "less-loader"],},{test: /\.ts$/, //解析tsloader: "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(), //解析vuenew FriendlyErrorsWebpackPlugin({compilationSuccessInfo: {messages: ["you this hear:http://localhost:8080"],},}),],
};
module.exports = config;
  1. 配置 devServer 可修改端口 指定地址等
javascript">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$/, //解析cssuse: ["style-loader", "css-loader"],},{test: /\.less$/, //解析 lessuse: ["style-loader", "css-loader", "less-loader"],},{test: /\.ts$/, //解析tsloader: "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(), //解析vuenew FriendlyErrorsWebpackPlugin({compilationSuccessInfo: {messages: ["you this hear:http://localhost:8080"],},}),],
};
module.exports = config;
  1. externals 性能优化
javascript">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$/, //解析cssuse: ["style-loader", "css-loader"],},{test: /\.less$/, //解析 lessuse: ["style-loader", "css-loader", "less-loader"],},{test: /\.ts$/, //解析tsloader: "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(), //解析vuenew FriendlyErrorsWebpackPlugin({compilationSuccessInfo: {messages: ["you this hear:http://localhost:8080"],},}),],externals: {vue:'Vue'}
};
module.exports = config;

最终的 package.json 包详解

javascript">{"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.ppmy.cn/server/38518.html

相关文章

使用Docker安装Whistle Web Debugging Proxy

使用Docker安装Whistle Web Debugging Proxy

大家好&#xff0c;继续给大家分享如何使用docker来安装Whistle Web Debugging Proxy&#xff0c;关于Whistle Web Debugging Proxy的介绍和使用&#xff0c;大家可以参考下面文章&#xff0c;希望本文能够给大家的工作带来一定帮助。 Whistle Web Debugging Proxy介绍及使用 …
阅读更多...
Spring Web MVC 快速入门

Spring Web MVC 快速入门

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;Spring学习之路&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 什么是Spring MVC&#xff1f; MVC模式介绍 ​编辑学习Spring MVC…
阅读更多...
DJANGO_PART 1

DJANGO_PART 1

DJANGO_PART 1 文章目录 DJANGO_PART 11. 安装DJANGO2. 创建项目3. APP概念4. 快速上手5. templates6. 引入其它静态文件7. 模板语法8. 请求与响应 1. 安装DJANGO 安装语句&#xff1a;pip install django 2. 创建项目 django中项目会有一些默认的文件和默认的文件夹 终端创建…
阅读更多...
只允许内网访问时，如何设置hosts

只允许内网访问时，如何设置hosts

1、Hosts文件简介 hosts文件是一个没有扩展名的计算机文件&#xff0c;用于将主机名与对应的 IP 地址关联起来。在操作系统中&#xff0c;hosts文件通常用于在本地解析域名&#xff0c;以便将域名映射到特定的IP地址。这个文件可以用来屏蔽广告、加速访问特定网站、解决DNS解析…
阅读更多...
【Linux】线程的内核级理解详谈页表以及虚拟地址到物理地址之间的转化

【Linux】线程的内核级理解详谈页表以及虚拟地址到物理地址之间的转化

一、线程的概念 对于进程来说&#xff0c;进程创建时间和空间成本较高&#xff0c;因为进程是承担分配系统资源的基本实体&#xff0c;所以线程的出现就成为了必然。Linux线程与进程非常相似&#xff0c;Linux设计者在设计之初觉得如果再为线程设计数据结构和调度算法就会使整个…
阅读更多...
Python实现Chiikawa

Python实现Chiikawa

写在前面 哈&#xff1f;呀哈&#xff01;本期小编给大家素描版Chiikawa&#xff01; 主人公当然是我们可爱的吉伊、小八以及乌萨奇啦~ Chiikawa小小可爱 《Chiikawa》是一部来自日本的超萌治愈系漫画与动画作品&#xff0c;由作者秋田祯信创作。"Chiikawa"这个名字…
阅读更多...
负载或反向代理服务器如何配置XFF以获取终端真实IP

负载或反向代理服务器如何配置XFF以获取终端真实IP

文章目录 XFF介绍工作原理注意事项 配置方式1. Nginx2. HAProxy3. F5 BIG-IP4. Radware注意事项 本文介绍如何在反向代理或负载中配置XFF&#xff0c;方便后端服务获取请求来源的真实IP XFF介绍 X-Forwarded-For&#xff08;简称XFF&#xff09;是一个非标准的HTTP头部字段&a…
阅读更多...
HCIP-Datacom-ARST必选题库_OSPF【道题】

HCIP-Datacom-ARST必选题库_OSPF【道题】

某工程师利用2台路由器进行IPv6测试&#xff0c;他想要通过运行OSPFv3实现IPv6网络的互联互通。关于R1需要进行的OSPPv3相关配置&#xff0c;正确的有? [R1] router id 10.1.1.1A [R1-Giqabi tEthernet0/0/1] ospfv3 1 area 0 [R1-ospfv3-11 router-id 10.1.1.1 [R1-ospfv3…
阅读更多...
最新文章

Copyright @ 2022~2023