自己构建webpack+vue3+ts

news2024/12/22 20:42:46

先看看我的目录结构（我全局使用TS）：
在这里插入图片描述

一、安装配置webpack打包

安装esno

npm install esno

esno 是基于 esbuild 的 TS/ESNext node 运行时,有了它，就可以直接通过esno *.ts的方式启动脚本，package.json中添加 type:“module”，使用esm的模块管理方式。

{
  "name": "create-my-vue-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "esno ./config/build.ts"
  },
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "esno": "^4.0.0"
  }
}

创建build.ts，执行npm run build
在这里插入图片描述

安装webpack、webpack-cli

npm install webpack
npm install webpack-cli

webpack必须安装webpackcli
build.ts中编写打包代码

import webpack, { Stats } from "webpack";
import config from "./webpack.config"

//我直接使用webpack，不使用webpck-cli，vue的脚手架
const compiler = webpack(config, (err, stats) => {
    if (err) {
        console.error(err.stack || err)
    } else if ((stats as Stats).hasErrors()) {
        console.log(stats);
    } else {

    }
})

编写打包配置文件webpack.config.ts

import path from "path";//nodejs里面的基本包，用来处理路径
const parentDir = path.resolve(process.cwd());

//我们先打个基本的包
export default {
    mode: "development" as "development",
    entry: "./src/main.ts",
    output: {
        path: path.join(parentDir, 'dist'),
        filename: "bundle.js",
    },
    module: {
        // 指定要加载的规则
        rules: [],
    },
    // 模块配置：让webpack了解哪些方法可以被当作模块引入
    resolve: {
		extensions: ['.ts', '.js']
    },
    plugins: []
};

创建业务代码入口文件main.ts

let test: string = '';
console.log(test);

执行一下打包npm run build
在这里插入图片描述
报错了，说需要个loader来处理ts，我们安装ts-loader，并在webpack.config.ts中添加相关配置

npm install ts-loader

import path from "path";//nodejs里面的基本包，用来处理路径
const parentDir = path.resolve(process.cwd());

//我们先打个基本的包
export default {
    mode: "development" as "development",
    entry: "./src/main.ts",
    output: {
        path: path.join(parentDir, 'dist'),
        filename: "bundle.js",
    },
    module: {
        // 指定要加载的规则
        rules: [
            {
                test: /\.ts$/, // 解析 ts
                loader: "ts-loader"
            }
        ],
    },
    // 模块配置：让webpack了解哪些方法可以被当作模块引入
    resolve: {
		extensions: ['.ts', '.js']		
    },
    plugins: [

    ]
};

再次执行npm run build

在这里插入图片描述
有报错了，说没有tsconfig.json文件
创建tsconfig.ts

{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "jsx": "preserve",
      "importHelpers": true,
      "moduleResolution": "node",
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "sourceMap": true,
      "baseUrl": ".",
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "include": [
      "src/*.ts",
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
  }

再次打包，打包成功了
在这里插入图片描述
手动拷贝到index.html里面试试，运行也没有问题
在这里插入图片描述
在这里插入图片描述
安装HtmlWebpackPlugin自动拷贝打包文件到index.html中，安装CleanWebpackPlugin，自动清除dist目录，并更新webpack.config.ts

import path from "path";//nodejs里面的基本包，用来处理路径
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import HtmlWebpackPlugin from 'html-webpack-plugin';
const parentDir = path.resolve(process.cwd());

//我们先打个基本的包
export default {
    mode: "development" as "development",
    entry: "./src/main.ts",
    output: {
        path: path.join(parentDir, 'dist'),
        filename: "bundle.js",
    },
    module: {
        // 指定要加载的规则
        rules: [
            {
                test: /\.ts$/, // 解析 ts
                loader: "ts-loader"
            }
        ],
    },
    // 模块配置：让webpack了解哪些方法可以被当作模块引入
    resolve: {
		extensions: ['.ts', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '你好，世界',
            template: './public/index.html'
        }),
        new CleanWebpackPlugin()
    ]
};

现在就可以自动将打包js文件插入到index.html中
在这里插入图片描述
增加开发服务并热更新，安装webpack-dev-server

npm install webpack-dev-server

创建dev.ts

import path from "path";//nodejs里面的基本包，用来处理路径
import webpack, { Stats } from "webpack";
import WebpackDevServer from "webpack-dev-server";
import config from "./webpack.config"

const parentDir = path.resolve(process.cwd());

const compiler = webpack(config)

const server = new WebpackDevServer({
    port: 3000,
    static: {
        directory: path.join(parentDir, 'public'),
    },
}, compiler);

const runServer = async () => {
    console.log('Starting server...');
    await server.start();
};

runServer();

在package.json中增加dev的脚本

"scripts": {
    "build": "esno ./config/build.ts",
    "dev": "esno ./config/dev.ts"
  },

执行npm run dev，就启动起来了
在这里插入图片描述

二、集成Vue

增加App.vue、更改main.ts、main.scss
App.vue

<template>
  <div>test</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    return {};
  },
});
</script>

main.ts

import { createApp } from 'vue'
import App from './components/App.vue'
import "./assets/main.scss"

// 注意：这里的 #app，需要在 public/index.html 中，写一个 id 为 app 的 div
createApp(App).mount('#app');

main.scss

* {
  background-color: red;
}

在这里插入图片描述
安装依赖

npm i --save-dev vue vue-loader url-loader style-loader css-loader node-sass sass-loader

更改webpack.config.ts

import path from "path";//nodejs里面的基本包，用来处理路径
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { VueLoaderPlugin } from "vue-loader"

const parentDir = path.resolve(process.cwd());

//我们先打个基本的包
export default {
    mode: "development" as "development",
    entry: "./src/main.ts",
    output: {
        path: path.join(parentDir, 'dist'),
        filename: "bundle.js",
    },
    module: {
        // 指定要加载的规则
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',//https://github.com/vuejs/vue-style-loader/issues/42
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: './font/[hash].[ext]',
                            publicPath: 'dist'
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
            {
                test: /\.ts$/, // 解析 ts
                loader: "ts-loader",
                options: {
                    // 上面一行不太重要，应该会按照默认路径寻找，下面一行必须要

                    // appendTsSuffixTo/appendTsxSuffixTo配置项的意思是说，从vue文件里面分离的script的ts,tsx（取决于<script lang="xxx"></script>）内容将会被加上ts或者tsx的后缀，然后交由ts-loader解析。
                    // 我在翻看了ts-loader上关于appendTsxSuffixTo的讨论发现，ts-loader貌似对文件后缀名称有很严格的限定，必须得是ts/tsx后缀，所以得在vue-loader extract <script>中内容后，给其加上ts/tsx的后缀名，这样ts-loader才会去处理这部分的内容。
                    // 在Vue项目中使用Typescript

                    configFile: path.resolve(process.cwd(), 'tsconfig.json'),
                    appendTsSuffixTo: [/\.vue$/]
                },
            }
        ],
    },
    // 模块配置：让webpack了解哪些方法可以被当作模块引入
    resolve: {
        extensions: [
            '.tsx',
            '.ts',
            '.mjs',
            '.js',
            '.jsx',
            '.vue',
            '.json']
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '你好，世界',
            template: './public/index.html'
        }),
        new CleanWebpackPlugin(),
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ]
};

创建shims-vue.d.ts

/* eslint-disable */
declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}

最终的package.json

{
  "name": "create-my-vue-test",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "esno ./config/dev.ts",
    "build": "esno ./config/build.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.9.1",
    "esno": "^4.0.0",
    "html-webpack-plugin": "^5.6.0",
    "node-sass": "^9.0.0",
    "sass-loader": "^14.0.0",
    "style-loader": "^3.3.4",
    "ts-loader": "^9.5.1",
    "url-loader": "^4.1.1",
    "vue": "^3.4.15",
    "vue-loader": "^17.4.2",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

再次运行，基础搭建好了
在这里插入图片描述

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

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

相关文章

【动态规划】【C++算法】801. 使序列递增的最小交换次数

【动态规划】【C++算法】801. 使序列递增的最小交换次数

作者推荐 【动态规划】【广度优先搜索】【状态压缩】847 访问所有节点的最短路径 本文涉及知识点 动态规划汇总 数组 LeetCode801使序列递增的最小交换次数 我们有两个长度相等且不为空的整型数组 nums1 和 nums2 。在一次操作中&#xff0c;我们可以交换 nums1[i] 和 num…
阅读更多...
【Java程序员面试专栏 专业技能篇】MySQL核心面试指引（二）：核心机制策略

【Java程序员面试专栏 专业技能篇】MySQL核心面试指引（二）：核心机制策略

关于MySQL部分的核心知识进行一网打尽，包括三部分：基础知识考察、核心机制策略、性能优化策略，通过一篇文章串联面试重点，并且帮助加强日常基础知识的理解，全局思维导图如下所示 本篇Blog为第二部分：核心机制策略，子节点表示追问或同级提问 日志机制 关于MySQL的几…
阅读更多...
【Web前端开发基础】CSS的结构伪类选择器、伪元素、浮动

【Web前端开发基础】CSS的结构伪类选择器、伪元素、浮动

CSS的浮动 目录 CSS的浮动一、学习目标二、文章内容2.1 结构伪类选择器2.2 伪元素2.3 标准流2.4 浮动2.5 清除浮动2.6 拓展&#xff08;BFC&#xff09; 三、综合案例3.1 小米模块案例3.2 网页导航案例 一、学习目标 能够使用结构伪类选择器在HTML中选元素能够说出标准流元素的…
阅读更多...
Kafka 问题排查

Kafka 问题排查

订单宽表数据不同步 事情的起因是专员在 ze app 上查不到订单了&#xff0c;而订单数据是从 mysql 的 order_search_info 查询的&#xff0c;order_search_info 表的数据是从 oracel 的 BZ_ORDER_INFO 表同步过来的&#xff0c;查不到说明同步有问题 首先重启&#xff0c;同步…
阅读更多...
《WebKit 技术内幕》学习之五（2）： HTML解释器和DOM 模型

《WebKit 技术内幕》学习之五（2）： HTML解释器和DOM 模型

2.HTML 解释器 2.1 解释过程 HTML 解释器的工作就是将网络或者本地磁盘获取的 HTML 网页和资源从字节流解释成 DOM 树结构。 这一过程中&#xff0c;WebKit 内部对网页内容在各个阶段的结构表示。 WebKit 中这一过程如下&#xff1a;首先是字节流&#xff0c;经过解码之…
阅读更多...
终端（命令提示符或Windows PowerShell或Azure Cloud Shell）概述

终端（命令提示符或Windows PowerShell或Azure Cloud Shell）概述

终端&#xff08;命令提示符或Windows PowerShell或Azure Cloud Shell&#xff09;是一种很 不 好用的东西 就是要背&#xff0c;很 不 爽 介绍 Windows 终端是一个新式主机应用程序&#xff0c;它面向你喜爱的命令行 shell&#xff0c;如命令提示符、PowerShell 和 bash&…
阅读更多...
力扣刷MySQL-第五弹（详细讲解）

力扣刷MySQL-第五弹（详细讲解）

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;力扣刷题讲解-MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出…
阅读更多...
Python 算法交易实验67 第一次迭代总结

Python 算法交易实验67 第一次迭代总结

说明 在这里对第一次迭代&#xff08;2023.7~ 2024.1&#xff09;进行一些回顾和总结&#xff1a; 回顾&#xff1a; 1 实现了0~1的变化2 在信息隔绝的条件下&#xff0c;无控制的操作&#xff0c;导致被套 总结&#xff1a; 思路可行&#xff0c;在春暖花开的时候&#x…
阅读更多...
设备对象(DEVICE_OBJECT)

设备对象(DEVICE_OBJECT)

设备对象(DEVICE_OBJECT) 每个驱动程序会创建一个或多个设备对象&#xff0c;用DEVICE_OBJECT数据结构表示。每个设备对象都会有一个指针指向下一个设备对象&#xff0c;因此就形成一个设备链。设备对象链的第一个设备是由DRIVER_OBJECT结构体中指明的。设备对象保存设…
阅读更多...
C++ 之LeetCode刷题记录（十五）

C++ 之LeetCode刷题记录（十五）

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅。 依旧是追求耗时0s的一天。 94. 二叉树的中序遍历 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 示例 1&#xff1a; …
阅读更多...
C#，入门教程(28)——文件夹（目录）、文件读（Read）与写（Write）的基础知识

C#，入门教程(28)——文件夹（目录）、文件读（Read）与写（Write）的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(27)——应用程序&#xff08;Application&#xff09;的基础知识https://blog.csdn.net/beijinghorn/article/details/125094837 C#知识比你的预期简单的多&#xff0c;但也远远超乎你的想象&#xff01; 与文件相关的知识&#xf…
阅读更多...
跟着我学Python进阶篇：03. 面向对象（下）

跟着我学Python进阶篇：03. 面向对象（下）

往期文章 跟着我学Python基础篇&#xff1a;01.初露端倪 跟着我学Python基础篇&#xff1a;02.数字与字符串编程 跟着我学Python基础篇&#xff1a;03.选择结构 跟着我学Python基础篇&#xff1a;04.循环 跟着我学Python基础篇&#xff1a;05.函数 跟着我学Python基础篇&#…
阅读更多...
# Jenkins：一键部署与备份的终极解决方案

# Jenkins：一键部署与备份的终极解决方案

Jenkins&#xff1a;一键部署与备份的终极解决方案 引言 在持续集成和持续部署&#xff08;CI/CD&#xff09;的世界中&#xff0c;Jenkins 作为一个开源自动化服务器&#xff0c;扮演着至关重要的角色。但是&#xff0c;部署和维护 Jenkins 服务往往需要一定的技术知识和时间…
阅读更多...
卷积和滤波对图像操作的区别

卷积和滤波对图像操作的区别

目录 问题引入 解释 卷积 滤波 问题引入 卷积和滤波是很相似的&#xff0c;都是利用了卷积核进行操作 那么他们之间有什么区别呢&#xff1f; 卷积&#xff1a;会影响原图大小 滤波&#xff1a;不会影响原图大小 解释 卷积 我们用这样一段代码来看 import torch.nn as …
阅读更多...
【C++】入门（一）

【C++】入门（一）

前言&#xff1a; 本篇博客将带大家认识C&#xff0c;熟悉基本语法 文章目录 认识CC的诞生与发展C 在行业中的运用 一、命名空间1.1 命名空间的定义1.2 命名空间的使用1.3 命名空间的访问 二、C输入&输出输出操作符 <<输入操作符 >>换行符和刷新输出缓冲区关键…
阅读更多...
C++入门学习（十二）字符串类型

C++入门学习（十二）字符串类型

上一节&#xff08;C入门学习&#xff08;十一&#xff09;字符型-CSDN博客&#xff09;中我们学到如何表示和使用一个字符串&#xff0c;本篇文章是字符串&#xff08;多个字符&#xff09;。 定义字符串主要有两种方式&#xff1a; 第一种&#xff1a; char str[] "…
阅读更多...
openGauss学习笔记-203 openGauss 数据库运维-常见故障定位案例-修改索引时只调用索引名提示索引不存在

openGauss学习笔记-203 openGauss 数据库运维-常见故障定位案例-修改索引时只调用索引名提示索引不存在

文章目录 openGauss学习笔记-203 openGauss 数据库运维-常见故障定位案例-修改索引时只调用索引名提示索引不存在203.1 修改索引时只调用索引名提示索引不存在203.1.1 问题现象203.1.2 原因分析203.1.3 处理办法 openGauss学习笔记-203 openGauss 数据库运维-常见故障定位案例-…
阅读更多...
28、web攻防——通用漏洞SQL注入HTTP头XFFCOOKIEPOST请求

28、web攻防——通用漏洞SQL注入HTTP头XFFCOOKIEPOST请求

文章目录 $_GET&#xff1a;接收get请求&#xff0c;传输少量数据&#xff0c;URL是有长度限制的&#xff1b; $_POST&#xff1a;接收post请求&#xff1b; $_COOKIE&#xff1a;接收cookie&#xff0c;用于身份验证&#xff1b; $_REQUEST&#xff1a;收集通过 GET 、POST和C…
阅读更多...
Web开发3：数据库使用

Web开发3：数据库使用

欢迎来到Web开发系列的第三篇&#xff01;今天我们将探讨如何在Web开发中使用数据库。数据库是存储和管理数据的重要工具&#xff0c;它在现代应用程序中起着至关重要的作用。无论是社交媒体应用、电子商务平台还是博客网站&#xff0c;数据库都是不可或缺的一部分。 什么是数…
阅读更多...
基于DUP的网络聊天室

基于DUP的网络聊天室

基于UDP的网络聊天室的使用&#xff08;select&#xff09;完成的服务器端 #include<head.h> typedef struct de {char name[10];struct sockaddr_in cin;struct de* next; }*linklist; //创建节点 linklist a_creat() {linklist p(linklist)malloc(sizeof(struct de));…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023