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

已于 2023-09-11 16:31:56 修改
阅读量708 收藏 1
点赞数 1
文章标签： webpack 前端 node.js
于 2023-09-11 16:30:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64544033/article/details/132806570
版权

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

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+
在这里插入图片描述

筱闯~
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
使用 webpack 从0开始搭建的 vue3+sass+element-plus+typescript 项目
09-02
在本文中，我们将深入探讨如何使用Webpack从零开始搭建一个基于Vue3、Sass、Element-Plus和TypeScript的项目。Webpack是一个强大的模块打包工具，它能够处理JavaScript、CSS和其他资源，将它们打包成优化过的单一...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
Webpack5 搭建 Vue3 + TS 项目，web网页开发
2401_84093203的博客
04-04 1243
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-7NirTWxN-1712234559064)][外链图片转存中…(img-qBiQqOHt-1712234559064)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
使用 Webpack 从 0 到 1 构建 Vue3 项目
Lyrelion的博客
12-21 3205
使用 Webpack 从 0 到 1 构建 Vue3 项目
webpack从零到1 构建 vue3
最新发布
weixin_44166849的博客
05-08 590
3.在public 文件夹下创建 index.html5.webpack.config.js 文件注：想在webpack.config.js 文件中获得智能提示 需要 以下代码打包的时候清空dist 就不用做手动删除了配置别名 @ 代表src修改 webpack.config.js 文件 进行别名 添加 resolve 属性修改webpack.config.js。
学习TypeScript21（webpack构建ts+vue3项目）
qq1195566313的博客
01-26 1万+
安装依赖 1.全局安装rollup npm install rollup-g 2.安装TypeScript npm install typescript -D 3.安装TypeScript 转换器 npm installrollup-plugin-typescript2 -D 4安装代码压缩插件 npm install rollup-plugin-terser -D 5 安装rollupweb服务 npm install rollup-plugin-serve -D 6 安装热更新 npm...
如何用Webpack搭建Vue.js 3项目?
wb1991wb的博客
01-03 824
我们就在src的文件夹里新增两个Vue.js 3的源码内容，为后续编译做准备。当你完成了步骤一的项目目录的结构设计和源码准备后，就可以进行。这里的npm模块分成两种，一种是源码所在的npm模块，另外一种是开发过程中所需要的npm模块。两种npm模块的安装方式都一样，区别就是安装命令要带上不同参数。这里源码代码依赖是 Vue.js 的官方源码库，这时候会自动增加依赖声明到 package.json文件的dependencies字段里。
webpack构建vue3+ts项目
sun_jinlin的博客
02-02 1112
使用webpack、webpack-cli、自定义配置构建 vue3+ts项目
webpack手动配置一个vue3项目
huangfengnt的博客
05-17 1254
webpack手动配置一个vue3项目
vue3+vite+ts 仿淘宝放大镜效果
09-17
4. **图片轮播**：项目中实现了图片点击轮播功能，这涉及到Vue3组件的设计，以及事件监听（如click事件）来改变当前显示的图片。通常会使用数组存储图片源，并通过数据绑定显示在界面上。 5. **鼠标悬停放大**：...
vue-cli3+ts+webpack实现多入口多出口功能
12-08
【Vue CLI 3 + TypeScript + Webpack 多入口多出口实现】 ...此外，随着技术的发展，Vue CLI 3 已经更新到了 Vue CLI 4，Webpack 也更新到了 5.x 版本，所以最好参考最新的文档来配置和管理项目。
vue+cli+ts项目实战.rar
04-02
Vue CLI（命令行界面工具）则是官方提供的一个强大脚手架，它使得构建Vue项目变得简单快捷。在这个“vue+cli+ts项目实战”中，我们将探讨如何结合TypeScript来提升项目的类型安全性和可维护性，以及如何利用view-...
02｜Webpack编译搭建：如何用Webpack初构建Vue3项目？
sucaiwa的博客
03-01 867
这节课我们讲了这么多关于Webpack的Vue.js 3项目编译配置的知识，核心展示了企业级项目是怎么做编译配置的。用Webpack搭建Vue.js 3项目，主要包括配置项目目录、根据要求安装依赖（Plugin和Loader）、开发模式和生产模式的设置这几个步骤，其中你要特别注意开发模式和生产模式的配置复用和配置隔离。我们前面也说了，我们选择Webpack，是为了面向企业级项目的学习目标考虑。
使用webpack5搭建vue3项目过程记录(详细注解)
qq_41867900的博客
08-18 2542
webpack5搭建详细记录
webpack创建Vue3
天上白玉京，十二楼五城，仙人抚我顶，结发授长生
03-19 196
webpack从0到一配置vue3项目
vue3 webpack打包流程及安装 （1）
weixin_68266812的博客
09-07 1601
在文件进行配置打包的东西。
webpack构建vue3项目
weixin_55508765的博客
01-16 1616
在前端工作中，开发vue的话，基本上使用的是基于vue-cli vite等构建的，基于其原理，借鉴了很多大佬的经验，本文记录了使用Webpack从零开始搭建一个TS+Vue3项目的步骤，给大家分享一下。文章后面有源码，包版本。使用的node和pnpm版本如下。
webpack4+vue3.0+element-plus创建基于vue3的项目
Mr_XiMu的博客
01-15 3380
webpack4+vue3.0+element-plus创建基于vue3的项目
Vue基础知识总结 9：vue webpack打包原理
热门推荐
学Java，找哪吒
10-06 2万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、前端模块化 webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。 并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。 二、打
vue3 + ts webpack .d.ts
08-17
为了在Vue 3项目中使用TypeScript和Webpack，并且正确地生成.d.ts声明文件，你需要按照以下步骤进行配置： 1. 安装依赖： ```bash npm install --save-dev typescript ts-loader vue-loader@next @types/vue @vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

筱闯~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值