使用 Webpack 从 0 到 1 构建 Vue3 项目 + ts

news2024/12/27 11:59:30

使用 Webpack 从 0 到 1 构建 Vue3 项目

  • 1.初始化项目结构
  • 2.安装 webpack,补充智能提示
  • 3.初步编写 webpack.config.js
      • 3.1设置入口文件及出口文件
      • 3.2 指定 html 模板位置
  • 4.配置 运行/打包 命令,首次打包项目
  • 5.添加 Vue 及相关配置
      • 5.1安装并引入 vue
      • 5.2 补充 vue 声明文件
      • 5.3 增加 vue 相关 webpack 配置,打包 vue 文件
  • 6.增加 删除上次打包文件 的配置
  • 7.在 webpack 中,配置别名 @,替换 src
  • 8.安装样式相关 loader,协助 webpack 解析样式
  • 9.添加 TypeScript Loader,协助 webpack 处理 ts
  • 10.美化 webpack 打包时的控制台输出
  • 11.externals 排除打包文件,使用 cdn 引入,实现性能优化

1.初始化项目结构

原则:尽量跟vue-cli构建项目,尽量保持一致
在这里插入图片描述
创建 package.json

npm init -y

创建 tsconfig.json

 tsc --init

如果没有 tsc,则执行下方命令

npm install typescript -g

2.安装 webpack,补充智能提示

安装 webpack

yarn add webpack

安装完成后,如果 webpack 版本大于 3,则需要安装 webpack-cli

yarn add webpack-cli 

安装启动服务

yarn add webpack-dev-server

安装 html 模板

yarn add html-webpack-plugin 

新建 webpack 配置文件 —— webpack.config.js
使用 注解 帮我们增加智能提示

// 增加代码智能提示
const { Configuration } = require('webpack')
/**
 * @type { Configuration } // 使用注解的方式,增加代码智能提示
 */
const config = {}
module.exports = config

3.初步编写 webpack.config.js

3.1设置入口文件及出口文件

// 增加代码智能提示
const { Configuration } = require('webpack')
const path = require('path')
/**
 * @type { Configuration } // 使用注解的方式,增加代码智能提示
 */
const config = {
    // 入口文件
    entry: './src/main.ts',
    // 出口文件
    output: {
        filename: "[hash].js",
        path: path.resolve(__dirname, 'dist')
    },
}
module.exports = config

3.2 指定 html 模板位置

// 增加代码智能提示
const { Configuration } = require('webpack')
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
/**
 * @type { Configuration } // 使用注解的方式,增加代码智能提示
 */
const config = {
    // 入口文件
    entry: './src/main.ts',
    // 出口文件
    output: {
        filename: "[hash].js",
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new htmlWebpackPlugin({
            // 指定 html 模板位置
            template: "./public/index.html"
        }),
    ],
}
module.exports = config

4.配置 运行/打包 命令,首次打包项目

在 package.json 中,配置下面两条命令:

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server",
        "build": "webpack"
    }

在 main.ts 中,随便写点内容,比如 const a = 1;并执行打包命令:

 npm run build

出现下方报错,告诉我们没指定 mode
在这里插入图片描述
去 webpack.config.js 中指定 mode —— 如果指定为 开发环境,那么打包出来的代码,不会被压缩

// 增加代码智能提示
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({
            // 指定 html 模板位置
            template: "./public/index.html"
        }),
    ],
}
module.exports = config

再执行一遍打包命令,顺利输出下方的文件,打包成功
在这里插入图片描述

5.添加 Vue 及相关配置

5.1安装并引入 vue

安装 vue

yarn add vue

在 main.ts 中,引入 vue

import { createApp } from 'vue'
import App from './App.vue'
// 注意:这里的 #app,需要在 public/index.html 中,写一个 id 为 app 的 div
createApp(App).mount('#app')

会发现各种爆红,因为 ts 此时还不认识 vue 呢,所以需要增加 vue 声明文件

5.2 补充 vue 声明文件

项目根目录下,新建 env.d.ts

declare module "*.vue" {
   import { DefineComponent } from "vue"
   const component: DefineComponent<{}, {}, any>
   export default component
}

这样,main.ts 里就不会爆红了,因为 ts 现在认识 vue 了

5.3 增加 vue 相关 webpack 配置,打包 vue 文件

直接打包会报错,此时 webpack 不认识 template 之类的标签
在这里插入图片描述
需要安装 loader,协助 webpack 解析 vue 相关标签、文件

yarn add vue-loader@next
yarn add @vue/compiler-sfc

在 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',
    // 出口文件
    output: {
        filename: "[hash].js",
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/, // 解析 .vue 结尾的文件
                use: "vue-loader"
            },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // 指定 html 模板位置
            template: "./public/index.html"
        }),
        new VueLoaderPlugin(), // 解析 vue 模板
    ],
}
module.exports = config

再打包一下,发现还是打包报错
在这里插入图片描述
因为此时 webpack 还不支持 typescript,可以把 lang=ts 先删除,就能成功打包了

6.增加 删除上次打包文件 的配置

随着打包次数的不断增多,打包文件也会越来越多
在这里插入图片描述
我们需要安装一个插件,在每次打包的时候,清空一下 dist 文件夹

yarn add clean-webpack-plugin 

在 webpack.config.js 中,补充配置

// 增加代码智能提示
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')
 
/**
 * @type { Configuration } // 使用注解的方式,增加代码智能提示
 */
const config = {
    mode: "development",
    // 入口文件
    entry: './src/main.ts',
    // 出口文件
    output: {
        filename: "[hash].js",
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/, // 解析 .vue 结尾的文件
                use: "vue-loader"
            },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // 指定 html 模板位置
            template: "./public/index.html"
        }),
        new VueLoaderPlugin(), // 解析 vue 模板
        new CleanWebpackPlugin(), // 打包清空 dist
    ],
}
module.exports = config

7.在 webpack 中,配置别名 @,替换 src

在 resolve 中,进行配置

// 增加代码智能提示
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')
/**
 * @type { Configuration } // 使用注解的方式,增加代码智能提示
 */
const config = {
    mode: "development",
    // 入口文件
    entry: './src/main.ts',
    // 出口文件
    output: {
        filename: "[hash].js",
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/, // 解析 .vue 结尾的文件
                use: "vue-loader"
            },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // 指定 html 模板位置
            template: "./public/index.html"
        }),
        new VueLoaderPlugin(), // 解析 vue 模板
        new CleanWebpackPlugin(), // 打包清空 dist
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, './src') // 别名
        },
        extensions: ['.js', '.json', '.vue', '.ts', '.tsx'] // 识别后缀
    },
}
module.exports = config

8.安装样式相关 loader,协助 webpack 解析样式

新建 index.css,随便写点样式
利用设置好的别名 @,在 main.ts 中进行引入,发现报错了
在这里插入图片描述
这个报错不是别名 @ 导致的,而是 webpack 不会处理 css 导致的

需要安装一些 loader 协助 webpack 处理样式
处理 css 文件

yarn add css-loader

处理 style 样式

yarn add style-loader 

处理 less 语法

yarn add less
yarn add less-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')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
/**
 * @type { Configuration } // 使用注解的方式,增加代码智能提示
 */
const config = {
    mode: "development",
    // 入口文件
    entry: './src/main.ts',
    // 出口文件
    output: {
        filename: "[hash].js",
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/, // 解析 .vue 结尾的文件
                use: "vue-loader"
            },
            {
                test: /\.less$/, // 解析 less
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.css$/, // 解析 css
                use: ["style-loader", "css-loader"],
            },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // 指定 html 模板位置
            template: "./public/index.html"
        }),
        new VueLoaderPlugin(), // 解析 vue 模板
        new CleanWebpackPlugin(), // 打包清空 dist
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, './src') // 别名
        },
        extensions: ['.js', '.json', '.vue', '.ts', '.tsx'] // 识别后缀
    },
}
module.exports = config

9.添加 TypeScript Loader,协助 webpack 处理 ts

安装 typescript

yarn add typescript

安装 typescript loader

yarn add ts-loader

注意:ts loader 不能直接使用,他比别的 loader 多了 options(因为 ts loader 需要针对 vue 等单文件组件做单独处理)
在 webpack.config.js 中,补充配置

// 增加代码智能提示
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')
 
/**
 * @type { Configuration } // 使用注解的方式,增加代码智能提示
 */
const config = {
    mode: "development",
    // 入口文件
    entry: './src/main.ts',
    // 出口文件
    output: {
        filename: "[hash].js",
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/, // 解析 .vue 结尾的文件
                use: "vue-loader"
            },
            {
                test: /\.less$/, // 解析 less
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.css$/, // 解析 css
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.ts$/, // 解析 ts
                loader: "ts-loader",
                options: {
                    configFile: path.resolve(process.cwd(), 'tsconfig.json'),
                    appendTsSuffixTo: [/\.vue$/]
                },
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // 指定 html 模板位置
            template: "./public/index.html"
        }),
        new VueLoaderPlugin(), // 解析 vue 模板
        new CleanWebpackPlugin(), // 打包清空 dist
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, './src') // 别名
        },
        extensions: ['.js', '.json', '.vue', '.ts', '.tsx'] // 识别后缀
    },
}
 
module.exports = config

每次改完配置文件,都需要重启,才能保证 webpack 配置生效

10.美化 webpack 打包时的控制台输出

11.externals 排除打包文件,使用 cdn 引入,实现性能优化

上面的文件直接打包后,产生的文件高达 800k+
在这里插入图片描述
可以考虑不打包 vue,在 public/index.html 中,采用 cdn 方式引入 vue,进而减小体积
在这里插入图片描述
为了排除打包文件,在 webpack.config.js 中,补充配置

// 增加代码智能提示
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");
 
/**
 * @type { Configuration } // 使用注解的方式,增加代码智能提示
 */
const config = {
    mode: "development",
    // 入口文件
    entry: './src/main.ts',
    // 出口文件
    output: {
        filename: "[hash].js",
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/, // 解析 .vue 结尾的文件
                use: "vue-loader"
            },
            {
                test: /\.less$/, // 解析 less
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.css$/, // 解析 css
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.ts$/, // 解析 ts
                loader: "ts-loader",
                options: {
                    configFile: path.resolve(process.cwd(), 'tsconfig.json'),
                    appendTsSuffixTo: [/\.vue$/]
                },
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // 指定 html 模板位置
            template: "./public/index.html"
        }),
        new VueLoaderPlugin(), // 解析 vue 模板
        new CleanWebpackPlugin(), // 打包清空 dist
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo: { // 美化样式
                messages: ['You application is running here http://localhost:9001']
            }
 
        })
    ],
    // 取消多余的打包提示
    stats: "errors-only",
    resolve: {
        alias: {
            "@": path.resolve(__dirname, './src') // 别名
        },
        extensions: ['.js', '.json', '.vue', '.ts', '.tsx'] // 识别后缀
    },
    // 排除打包 vue,采用 CDN 引入 vue,减小打包体积
    externals: {
        vue: "Vue"
    },
}
 
module.exports = config

配置完成后,重新打包可得 40k+
在这里插入图片描述

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

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

相关文章

一个详细且完整的公司局域网搭建案例,跟着操作!

局域网(Local Area Network&#xff0c;简称LAN)&#xff0c;用于将有限范围内&#xff08;例如一个实验室、一层办公楼或者校园&#xff09;的各种计算机、终端与外部设备互联成网。公司局域网怎么建立&#xff1f;首先来了解下不同规模企业网络组建方式。 10人以下企业网络组…

固定资产管理表怎么填写

在现代企业管理中&#xff0c;固定资产的管理是至关重要的环节。它不仅关系到企业运营的效率&#xff0c;也直接影响到企业的财务状况。因此&#xff0c;正确、有效地填写和管理固定资产管理表显得尤为重要。并提供一些创新的方法来优化这一过程。  让我们理解什么是固定资产…

Win10 cmd默认使用管理员身份运行的修改

一、在开始菜单搜索cmd&#xff0c;打开快捷方式文件位置 二、鼠标右键快捷方式&#xff0c;打开属性 三、选择高级&#xff0c;再勾选用管理员身份运行&#xff0c;点击确定即可

文心一言插件开发全流程,ERNIE-Bot-SDK可以调用文心一言的能力

文心一言插件开发 前言插件插件是什么工作原理申请开发权限 开始第一步&#xff1a;安装python第二步&#xff1a;搭建项目manifest 描述文件&#xff1a;ai-plugin.json插件服务描述文件&#xff1a;openapi.yaml开发自己的plugin-server 第三步&#xff1a;上传插件 SDK相关链…

记录一次开机内存分析的全过程

作者&#xff1a;zzy的学习笔记 记录一次开机内存分析的全过程&#xff0c;尽量详尽的介绍常用内存分析工具和命令行的使用&#xff0c;结合具体问题探讨开机内存分析的实践经验。通过这篇文章我会介绍开机内存的常用测试分析工具的基本使用方法&#xff0c;以及如何通过抓取出…

在UMG中播放图像序列,出现卡帧怎么办?

在虚幻引擎中播放图像序列 前期步骤可以参考上面链接中官方文档的步骤1-13 如果在媒体播放器中播放的时候&#xff0c;出现卡帧现象&#xff0c;说明你的图片序列的帧率与默认的不匹配 需要在lmg Media Source类型文件中&#xff0c;覆写你的帧率 比如&#xff0c;我的图片序…

VSCode错误整理

文章目录 一、zsh: command not found: python二、Python pip安装Django异常Could not find a version that satisfies the requirement pytz (from django)三、WARNING: You are using pip version 21.2.4, however version 23.2.1 is available.四、pip install django下载报…

Sui参会必备|Token 2049活动一览

TOKEN2049是在新加坡举办的一年一度首屈一指地加密货币活动&#xff0c;吸引了顶级的Web3公司和项目的创始人和高管&#xff0c;他们将在这里分享行业观点、聚焦全球发展&#xff0c;同时以独特且广泛的视角审视这个生态系统及其广阔的机会。 自5月份主网上线以来&#xff0c;S…

lv3 嵌入式开发-11 Linux下GDB调试工具

目录 1 GDB简介 2 GDB基本命令 3 GDB调试程序 1 GDB简介 GDB是GNU开源组织发布的一个强大的Linux下的程序调试工具。 一般来说&#xff0c;GDB主要帮助你完成下面四个方面的功能&#xff1a; 1、启动你的程序&#xff0c;可以按照你的自定义的要求随心所欲的运行程序&#…

七、MySql表的内置函数

文章目录 一、日期函数&#xff08;一&#xff09;常用日期函数1.获得年月日&#xff1a;2.获得时分秒&#xff1a;3.获得时间戳&#xff1a;4.在日期的基础上加日期&#xff1a;5.在日期的基础上减去时间&#xff1a;6.计算两个日期之间相差多少天 &#xff08;二&#xff09;…

基于Spring Boot 3.1.0的Dubbo代码实现(以Redis作为注册中心)

目录 基于Spring Boot 3.1.0的Dubbo代码实现&#xff08;以Redis作为注册中心&#xff09;一 简介二 前言三 文档查阅四 依赖项1 注意事项2 版本3 dependencyManagement依赖4 dependency依赖 五 配置文件1 注意事项2 代码 六 yml文件 基于Spring Boot 3.1.0的Dubbo代码实现&…

RRU-Net:The Ringed Residual U-Net for Image Splicing Forgery Detection阅读笔记一

文章目录 1. Introduction2. Related Work3. The Ringed Residual U-Net (RRU-Net)3.1. Residual Propagation3.2. Residual Feedback3.3. Ringed Residual Structure and Network Architectures 4. Evaluation Experiment and Comparative Analysis 1. Introduction 根据现有…

Golang 常用的几种密码加密方式

加密方式 加密有两种方式&#xff0c;一种是直接加密&#xff0c;一种是盐值加密 **直接加密&#xff08;Plain Hashing&#xff09;**指的是将原始密码直接进行加密&#xff0c;而不进行任何额外的操作。这种方式可能存在一些安全风险&#xff0c;因为相同的密码在经过加密后…

STM32F4X DMA

STM32F4X DMA 什么是DMASTM32F4X DMADMA框图DMA通道DMA仲裁器DMA FIFO DMA传输模式DMA传输方向存储器到存储器存储器到外设外设到存储器 DMA循环模式和普通模式循环模式&#xff08;Circular&#xff09;普通模式&#xff08;Normal&#xff09; DMA源、目标寄存器增量模式DMA例…

一文简介,数字时代的数据交易模式

在数字时代&#xff0c;数据作重要的信息和资源&#xff0c;未来获得更高质量的数据资源&#xff0c;数据交易越来越常见&#xff0c;数据也成为企业重要的无形资产。 2022年3月出台的《中共中央、国务院关于加快建设全国统一大市场的意见》强调要加快培育数据要素市场&#xf…

Zabbix登录绕过漏洞复现(CVE-2022-23131)

0x00 前言 最近在复现zabbix的漏洞&#xff08;CVE-2022-23131&#xff09;&#xff0c;偶然间拿到了国外某公司zabbix服务器。Zabbix Sia Zabbix是拉脱维亚Zabbix SIA&#xff08;Zabbix Sia&#xff09;公司的一套开源的监控系统。该系统支持网络监控、服务器监控、云监控和…

Jetpack Compose 1.5 发布:全新 Modifier 系统助力性能提升

不久前 Compose 1.5.0 稳定版发布&#xff0c;在组合的性能方面得到明显改善&#xff0c;这主要归功于对 Modifier API 的持续重构。 Modifier 是 Compose 中的重要概念&#xff0c;为 Composition 中的 LayoutNode 配置各种样式信息以用于后续渲染。在 1.3.0 之前的 Modifier …

Java知识点二

Java知识点二 1、Comparable内部比较器&#xff0c;Comparator外部比较器2、源码结构的区别:1&#xff09;Comparable接口&#xff1a;2&#xff09;Comparator接口&#xff1a; 2、Java反射 1、Comparable内部比较器&#xff0c;Comparator外部比较器 我们一般把Comparable叫…

【MySQL】表的增删改查

目录 MySQL表的增删查改 Create 单行数据全列插入 多行数据指定列插入 插入否则更新 替换数据 Retrieve SELECT 列 全列查询 指定列查询 查询字段为表达式 为查询结果指定别名 结果去重 WHERE 条件 查询英语不及格的同学及其英语成绩 查询语文成绩在80到90分的…

【自动化测试】如何在jenkins中搭建allure

相信大家在做自动化测试过程中&#xff0c;都会用到自动化测试环境&#xff0c;目前最常见的就是通过容器化方式部署自动化测试环境&#xff0c;但对于一些测试小白&#xff0c;不是很会搭建持续集成环境&#xff0c;特别是从0-1的过程&#xff0c;需要自行搭建很多依赖环境&am…