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

使用 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$/, // 解析 lessuse: ["style-loader", "css-loader", "less-loader"],},{test: /\.css$/, // 解析 cssuse: ["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$/, // 解析 lessuse: ["style-loader", "css-loader", "less-loader"],},{test: /\.css$/, // 解析 cssuse: ["style-loader", "css-loader"],},{test: /\.ts$/, // 解析 tsloader: "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$/, // 解析 lessuse: ["style-loader", "css-loader", "less-loader"],},{test: /\.css$/, // 解析 cssuse: ["style-loader", "css-loader"],},{test: /\.ts$/, // 解析 tsloader: "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(), // 打包清空 distnew 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.hqwc.cn/news/108751.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

VS报错 The build tools for v141 (Platform Toolset = ‘v141‘) cannot be found.

VS报错 The build tools for v141 (Platform Toolset = ‘v141‘) cannot be found.

在配置OpenGL 项目的时候遇到了平台不一致的问题 错误 1 error MSB8020: The build tools for v141 (Platform Toolset v141) cannot be found. To build using the v141 build tools, please install v141 build tools. Alternatively, you may upgrade to the current Vis…
阅读更多...
普中51-蜂鸣器实验

普中51-蜂鸣器实验

蜂鸣器实验 蜂鸣器主要分为压电式蜂鸣器和电磁式蜂鸣器两种类型 压电式蜂鸣器主要由多谐振荡器、压电蜂鸣片、阻抗匹配器及共鸣箱、外壳等组成。多谐振荡器由晶体管或集成电路构成&#xff0c;当接通电源后&#xff08;1.5~15V 直流工 作电压&#xff09;&#xff0c;多谐振荡…
阅读更多...
React TypeScript | 快速了解 antd 的使用

React TypeScript | 快速了解 antd 的使用

1. 安装&#xff1a; 就像安装其他插件库一样&#xff0c;在项目文件夹下执行&#xff1a; npm install antd --save如果你安装了 yarn&#xff0c;也可以执行&#xff1a; yarn add antd2. 引用 import { Button, Tooltip } from "antd"; import "antd/dis…
阅读更多...
自然语言处理应用(一)：情感分析

自然语言处理应用(一)：情感分析

情感分析 随着在线社交媒体和评论平台的快速发展&#xff0c;大量评论的数据被记录下来。这些数据具有支持决策过程的巨大潜力。 情感分析&#xff08;sentiment analysis&#xff09;研究人们在文本中 &#xff08;如产品评论、博客评论和论坛讨论等&#xff09;“隐藏”的情…
阅读更多...
云原生服务无状态（Stateless）特性的实现

云原生服务无状态（Stateless）特性的实现

文章目录 为何要使用无状态服务&#xff1f;无状态服务的实现方法1. 会话状态外部化2. 负载均衡3. 自动伸缩4. 容器编排5. 数据存储6. 安全性 示例&#xff1a;使用Spring Boot实现无状态服务结论 &#x1f389;欢迎来到云计算技术应用专栏~云原生服务无状态&#xff08;Statel…
阅读更多...
地理地形sdk：Tatuk GIS Developer Kernel for .NET Crack

地理地形sdk：Tatuk GIS Developer Kernel for .NET Crack

Tatuk GIS Developer Kernel for .NET 是一个变体&#xff0c;它是受控代码和 .NET GIS SDK&#xff0c;用于为用户 Windows 操作系统创建专业 GIS 软件的过程。它被认为是一个完全针对Win Forms 的.NET CIL&#xff0c;WPF 框架是针对C# 以及VB.NET、VC、Oxy 以及最终与.NET 的…
阅读更多...
VUE之滚动条参数设置

VUE之滚动条参数设置

/*css主要部分的样式*/ /*定义滚动条宽高及背景&#xff0c;宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar {width: 6px; /*对垂直流动条有效*/height: 6px; /*对水平流动条有效*/ }/*定义滚动条的轨道颜色、内阴影及圆角*/ ::-webkit-scrollbar-track{border-radius: 4…
阅读更多...
删除安装Google Chrome浏览器时捆绑安装的Google 文档、表格、幻灯片、Gmail、Google 云端硬盘、YouTube网址链接(Mac)

删除安装Google Chrome浏览器时捆绑安装的Google 文档、表格、幻灯片、Gmail、Google 云端硬盘、YouTube网址链接(Mac)

删除安装Google Chrome浏览器时捆绑安装的Google 文档、表格、幻灯片、Gmail、Google 云端硬盘、YouTube网址链接(Mac) Mac mini操作系统&#xff0c;安装完 Google Chrome 浏览器以后&#xff0c;单击 启动台 桌面左下角的“显示应用程序”&#xff0c;我们发现捆绑安装了 Goo…
阅读更多...
MySQL

MySQL

文章目录 1.Mysql1.1 为什么学习数据库1.2 什么是数据库1.3 数据库分类1.4 Mysql简介1.5 安装Mysql1.6 安装Sqlyog1.7 连接数据库 2.操作数据库2.1 操作数据库2.2 数据库的列类型2.3 数据库字段属性&#xff08;重点&#xff09;2.4 创建数据库表&#xff08;重点&#xff09;2…
阅读更多...
Java 使用 EMQX 实现物联网 MQTT 通信

Java 使用 EMQX 实现物联网 MQTT 通信

一、介绍 1、MQTT MQTT(Message Queuing Telemetry Transport, 消息队列遥测传输协议)&#xff0c;是一种基于发布/订阅(publish/subscribe)模式的"轻量级"通讯协议&#xff0c;该协议构建于TCP/IP协议上&#xff0c;由IBM在1999年发布。MQTT最大优点在于&#xff…
阅读更多...
Leetcode算法入门与数组丨3. 数组基础

Leetcode算法入门与数组丨3. 数组基础

文章目录 前言1 数组简介2 数组的基本操作2.1 访问元素2.2 查找元素2.3 插入元素2.4 改变元素2.5 删除元素 3 总结task03task04 前言 Datawhale组队学习丨9月Leetcode算法入门与数组丨打卡笔记 这篇博客是一个 入门型 的文章&#xff0c;主要是自己学习的一个记录。 内容会参…
阅读更多...
13-RocketMQ主从同步(HA实现)源码原理

13-RocketMQ主从同步(HA实现)源码原理

目录 HAClient端 Master端 AcceptSocketService实现原理 HAConnection实现原理 ReadSocketService WriteSocketService GroupTransferService实现原理 五大线程的协调关系 HAClient端 首先要去connect一下master&#xff0c;从而建立一个SocketChannel连接通道&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023