使用 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.rhkb.cn/news/132469.html

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

相关文章

Vue3+移动端适配屏幕+默认横屏展示

Vue3+移动端适配屏幕+默认横屏展示

效果图展示区: 1. 想要把px自动转换单位为vw需要项目根目录.postcssrc.js中进行配置以下代码 module.exports {plugins: {autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀&#xff0c;如-webkit-&#xff0c;-moz-等等"postcss-px-to-viewport": {unitTo…
阅读更多...
【面试题】前端开发中如何高效渲染大数据量？

【面试题】前端开发中如何高效渲染大数据量？

前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 【国庆头像】- 国庆爱国 程序员头像&#xff01;总有一款适合你&#xff01; 在日常工作中&#xff0c;较少的能遇到一次性往页面中插入大量数据的场景…
阅读更多...
易点易动固定资产管理系统：助力事业单位实现固定资产智能化管理

易点易动固定资产管理系统：助力事业单位实现固定资产智能化管理

在日常运营中&#xff0c;事业单位面临着大量固定资产的管理挑战。为了提高资产利用率、降低运营成本&#xff0c;并确保资产安全与准确的账务管理&#xff0c;事业单位亟需一款强大而智能的固定资产管理系统。易点易动固定资产管理系统应运而生&#xff0c;为事业单位提供了一…
阅读更多...
vue网页缓存页面与不缓存页面处理

vue网页缓存页面与不缓存页面处理

在主路由页面 <template><div style"height: 100%"><!-- 缓存 --><keep-alive><router-view v-if"$route.meta.keepAlive"></router-view></keep-alive><!-- 不缓存 --><router-view v-if"!$rou…
阅读更多...
ChatGPT 和 Elasticsearch：APM 工具、性能和成本分析

ChatGPT 和 Elasticsearch：APM 工具、性能和成本分析

作者&#xff1a;LUCA WINTERGERST 在本博客中&#xff0c;我们将测试一个使用 OpenAI 的 Python 应用程序并分析其性能以及运行该应用程序的成本。 使用从应用程序收集的数据&#xff0c;我们还将展示如何将 LLMs 成到你的应用程序中。 在之前的博客文章中&#xff0c;我们构建…
阅读更多...
Can‘t load the model for ‘stabilityai/sd-vae-ft-mse‘

Can‘t load the model for ‘stabilityai/sd-vae-ft-mse‘

Can’t load the model for ‘stabilityai/sd-vae-ft-mse’. If you were trying to load it from ‘https://huggingface.co/models’, make sure you don’t have a local directory with the same name. Otherwise, make sure ‘stabilityai/sd-vae-ft-mse’ is the correct…
阅读更多...
iOS pod repo push 报错 ld: file not found: libarclite_iphoneos.a 问题解决方案

iOS pod repo push 报错 ld: file not found: libarclite_iphoneos.a 问题解决方案

背景 Xcode 升级 14.3 之后&#xff0c;在Xcode 运行项目会收到以下错误 File not found: /Applications/Xcode-beta.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarclite_iphoneos.a 项目中可以通过以下方法解决编译错误&#xff0c;就是在 …
阅读更多...
铝及铝合金产品标识知识学习记录

铝及铝合金产品标识知识学习记录

声明 本文是学习GB-T 42916-2023 铝及铝合金产品标识. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1— 圆铸锭表面&#xff1b; 2——切完头尾的圆铸锭尾端(引锭头端)。 图 9 圆铸锭刻痕标识示意图(一) 示 例 2 : 5A06 牌号、铸态、尺寸规格为…
阅读更多...
uniapp微信小程序《隐私保护协议》弹窗处理流程

uniapp微信小程序《隐私保护协议》弹窗处理流程

背景 《关于小程序隐私保护指引设置的公告》 《小程序隐私协议开发指南》 流程 1.第一步 必须设置且审核通过&#xff01;&#xff01;&#xff01; 2.第二步 uniapp在manifest.json中添加&#xff01;&#xff01;&#xff01; /* 在 2023年9月15号之前&#xff0c;在 ap…
阅读更多...
景联文科技可为多模态语音翻译模型提供数据采集支持

景联文科技可为多模态语音翻译模型提供数据采集支持

8月22日Facebook的母公司Meta Platforms发布了一种能够翻译和转录数十种语言的人工智能模型——SeamlessM4T&#xff0c;可以在日常生活中或者商务交流中为用户提供更便捷的翻译和转录服务。 相较于传统的文本翻译&#xff0c;这项技术的最大区别在于它可以实现端到端的语音翻译…
阅读更多...
4.4-Spring源码循环依赖终极讲解

4.4-Spring源码循环依赖终极讲解

回顾上期内容 new 容器 new AnnotateBeanDefinitionReader 的时候创建很多创世纪的类&#xff0c;其中有一个ConfigurationPostProcessor是用来解析配置类的&#xff0c;将其注册起来存到Bean定义的Map中【这个类是基于Bean工厂后置处理器的】 这一步是将配置类注册到Bean定…
阅读更多...
C++之编译时预定义宏flag(二百一十二)

C++之编译时预定义宏flag(二百一十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
按图搜索淘宝商品（拍立淘）API接口 搜爆款商品 图片搜索功能api 调用示例

按图搜索淘宝商品（拍立淘）API接口 搜爆款商品 图片搜索功能api 调用示例

接口名称&#xff1a;item_search_img 公共参数 请求地址: 测试item_search_img 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_s…
阅读更多...
Linux 下spi设备驱动

Linux 下spi设备驱动

参考&#xff1a; Linux kernel 有关 spi 设备树参数解析 Linux kernel 有关 spi 设备树参数解析 - 走看看 Linux SPI驱动框架(1)——核心层 Linux SPI驱动框架(1)——核心层_linux spi驱动模型_绍兴小贵宁的博客-CSDN博客 Linux SPI驱动框架(2)——控制器驱动层 Linux SPI驱…
阅读更多...
Redis过期时间的思考

Redis过期时间的思考

当我们把 Redis 当做缓存来使用时&#xff0c;设置过期时间是必须的&#xff0c;但具体设置多少的过期时间呢&#xff0c;针对不同的场景会有不同的决策。 虚假一个场景&#xff0c;我们基于用户的地理位置推荐附近的陌生主播&#xff0c;用户可以线下去找主播沟通。当系统第一…
阅读更多...
【PickerView案例08-国旗搭建界面加载数据 Objective-C预言】

【PickerView案例08-国旗搭建界面加载数据 Objective-C预言】

一、来看我们第三个案例 1.来看我们第三个关于PickerView的一个案例， 首先呢，我要问大家一下， 咱们这个是几组数据呢， 这是一个pickerView，只不过，它显示的是什么，一个界面， 前面两个案例，都是文字 这个案例，开始有图片了， 总结一下这三个案例： 1）第一个案例…
阅读更多...
R3LIVE源码解析(10) — R3LIVE中r3live_vio.cpp文件

R3LIVE源码解析(10) — R3LIVE中r3live_vio.cpp文件

目录 1 r3live_vio.cpp简介 2 r3live_vio.cpp源码解析 1 r3live_vio.cpp简介 R3LIVE主要的公式推导在VIO上&#xff0c;所以我们来细细的分析这部分的功能。R3LIVE将VIO分成了两步&#xff0c;一是直接通过帧间的光流来追踪地图点&#xff0c;并且通过最小化追踪到的地图点的…
阅读更多...
C++之打印编译全过程(二百一十四)

C++之打印编译全过程(二百一十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
华为星闪联盟：引领无线通信技术创新的先锋

华为星闪联盟：引领无线通信技术创新的先锋

星闪&#xff08;NearLink&#xff09;&#xff0c;是由华为倡导并发起的新一代无线短距通信技术&#xff0c;它从零到一全新设计&#xff0c;是为了满足万物互联时代个性化、多样化的极致、创新体验需求而诞生的。这项技术汇聚了中国300多家头部企业和机构的集体智慧&#xff…
阅读更多...
Python工程师Java之路（p）Module和Package

Python工程师Java之路（p）Module和Package

文章目录 1、Python的Module和Package2、Java的Module和Package2.1、Module2.1.1、分模块开发意义2.1.2、模块的调用 2.2、Package Module通常译作模块&#xff0c;Package通常译作包 1、Python的Module和Package Python模块&#xff08;Module&#xff09;&#xff1a;1个以.…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023