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

最新推荐文章于 2024-06-26 17:43:04 发布
最新推荐文章于 2024-06-26 17:43:04 发布
阅读量3.2k 收藏 15
点赞数 4
分类专栏： 构建工具 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lyrelion/article/details/128066489
版权

目录

1. 初始化项目结构

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

3. 初步编写 webpack.config.js

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

5. 添加 Vue 及相关配置

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

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

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

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

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

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

12. 参考资料

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 打包时的控制台输出

这个功能依赖于插件

yarn add friendly-errors-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')
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'] // 识别后缀
    },
}

module.exports = config

可以看出：

  • 在 rules 中配置的，基本都是针对一些特殊格式的文件，进行处理的 loader
  • 在 plugin 中配置的，基本都是一些有特殊功能的插件

美化成功后，控制台只剩下一行提示：

 

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+ 

 

12. 参考资料

小满Vue3第四十三章（webpack 构建 Vue3项目）_小满zs的博客-CSDN博客_vue3 module.exports5.编写webpack config js。https://xiaoman.blog.csdn.net/article/details/126634893

Lyrelion
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
从0到1 Webpack搭建Vue3开发、生产环境
qq_43447509的博客
12-01 713
添加到每个文件导入的顶部 用于该文件中使用的、目标环境不支持的特性。如果执行第三个命名报如下错误 需要全局安装下touch-cli。替换core-js的导入 只导入目标环境模块所需的内容。可指定一个模板 打包后的js文件会自动引入。useBuiltIn属性默认false。webpack5内置 不需要再安装。需要安装corejs依赖。
从0搭建webpack5+vue3开发环境
梅花寺
11-02 1423
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。安装好以后，`package.json`文件的`devDependencies`下就会有我们刚刚安装好的依赖和对应的版本) 这个时候我们发现生成的文件里面有很多注释之类的代码，文件体积很大，我们需要修改webpack配置的`mode`为`production`。
webpack配置vue3项目
qq_53663696的博客
04-29 3715
用webpack搭建Vue3项目一、项目需要的基本依赖1.vue的依赖2.ui组件库依赖3.AJAX请求库依赖（axios）二、几个loader和webpack配置1.引入库2.目录结构三、main.js入口文件与index.html1.main.js2.index.html*四、webpack配置文件五、路由文件总结 声明：本文章采用node的包管理工具和webpack。 一、项目需要的基本依赖 1.vue的依赖 声明一点，自从22年3月依赖vue的默认版本就变成了3.x所有后面需要@指定版本。 n
webpack构建vue3项目
weixin_55508765的博客
01-16 1857
在前端工作中，开发vue的话，基本上使用的是基于vue-cli vite等构建的，基于其原理，借鉴了很多大佬的经验，本文记录了使用Webpack从零开始搭建一个TS+Vue3项目的步骤，给大家分享一下。文章后面有源码，包版本。使用的node和pnpm版本如下。
从0-1搭建一个web项目vue3+vite+ts+element-plus(脚手架分析)
最新发布
共同进步
06-26 1132
ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架。在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等功能。本文主要对packge.json文件进行详解 scripts、dependencies、devDependencies等配置项。
手动使用webpack配置vue3开发环境
qq_42294411的博客
05-07 603
手动使用webpack配置vue3开发环境。
如何用Webpack搭建Vue.js 3项目?
wb1991wb的博客
01-03 834
我们就在src的文件夹里新增两个Vue.js 3的源码内容，为后续编译做准备。当你完成了步骤一的项目目录的结构设计和源码准备后，就可以进行。这里的npm模块分成两种，一种是源码所在的npm模块，另外一种是开发过程中所需要的npm模块。两种npm模块的安装方式都一样，区别就是安装命令要带上不同参数。这里源码代码依赖是 Vue.js 的官方源码库，这时候会自动增加依赖声明到 package.json文件的dependencies字段里。
vue3.0-webpack
qq_57597418的博客
10-08 2104
vue3.0-webpack笔记
使用 webpack 从0开始搭建的 vue3+sass+element-plus+typescript 项目
09-02
在本文中，我们将深入探讨如何使用Webpack从零开始搭建一个基于Vue3、Sass、Element-Plus和TypeScript的项目。Webpack是一个强大的模块打包工具，它能够处理JavaScript、CSS和其他资源，将它们打包成优化过的单一...
webpack+vue2构建vue项目骨架的方法
08-28
本篇文章主要介绍了使用Webpack和Vue2构建Vue项目骨架的方法。通过本篇文章，我们可以了解使用Webpack和Vue2构建一个基本的前后端分离项目的骨架。 一、项目初始化 在开始构建项目之前，我们需要先初始化项目。...
详解如何使用webpack在vue项目中写jsx语法
11-27
在Vue项目中使用jsx语法，主要是借助Webpack的配置和Babel插件的转换能力。Vue 2.0虽然原生不支持JSX，但由于其强大的虚拟DOM机制，开发者可以选择使用jsx来编写组件的渲染逻辑。jsx是一种在JavaScript中插入XML语法...
webpack5配置之vue3
12-14
基于webpack5构建的vue3项目，可用来学习webpack5的常用配置，和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目，可用来学习webpack5的常用...
详解如何提高 webpack 构建 Vue 项目的速度
08-30
详解如何提高 Webpack 构建 Vue 项目的速度 在构建 Vue 项目时，Webpack 的构建速度是一个非常重要的问题。...因此，使用 DllPlugin 和 DllReferencePlugin 是提高 Webpack 构建 Vue 项目速度的重要方法。
02｜Webpack编译搭建：如何用Webpack初构建Vue3项目？
sucaiwa的博客
03-01 889
这节课我们讲了这么多关于Webpack的Vue.js 3项目编译配置的知识，核心展示了企业级项目是怎么做编译配置的。用Webpack搭建Vue.js 3项目，主要包括配置项目目录、根据要求安装依赖（Plugin和Loader）、开发模式和生产模式的设置这几个步骤，其中你要特别注意开发模式和生产模式的配置复用和配置隔离。我们前面也说了，我们选择Webpack，是为了面向企业级项目的学习目标考虑。
webpack手动配置一个vue3项目
huangfengnt的博客
05-17 1292
webpack手动配置一个vue3项目
【vue3】webpack和vite介绍与使用【超详细】
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
09-28 2194
webpack只负责项目打包，其他功能需要在webpack.config.js配置文件里进行设置。webpack适用于大型，复杂的项目，它可以处理多种不同类型的文件，并根据需求进行转换,压缩,打包。webpack唯一不好的就是配置比较复杂，需要花费一定的时间和精力进行学习和调试。
使用webpack5搭建vue3项目过程记录(详细注解)
qq_41867900的博客
08-18 2612
webpack5搭建详细记录
vue3 webpack打包流程及安装 （1）
weixin_68266812的博客
09-07 1647
在文件进行配置打包的东西。
webpack 搭建 vue3 项目
lilier233的博客
03-14 513
npm init -y（y是yes的缩写，即npm后面需要手动配置的选项采用默认配置）
使用webpack创建vue3项目
11-10
使用webpack创建Vue3项目的步骤如下： 1. 首先，需要安装Node.js和npm包管理器。 2. 创建一个新的项目文件夹，并在其中打开终端。 3. 在终端中运行以下命令来初始化npm： ``` npm init -y ``` 4. 接下来，需要安装Vue.js和Vue-loader： ``` npm install vue@next vue-loader@next @vue/compiler-sfc --save-dev ``` 5. 然后，安装webpack和webpack-cli： ``` npm install webpack webpack-cli --save-dev ``` 6. 创建一个名为webpack.config.js的文件，并将以下代码复制到其中： ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }) ] }; ``` 7. 在package.json文件中添加以下脚本： ```json "scripts": { "build": "webpack --mode production" } ``` 8. 创建一个名为src的文件夹，并在其中创建一个名为main.js的文件。在main.js中添加以下代码： ```javascript import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 9. 创建一个名为public的文件夹，并在其中创建一个名为index.html的文件。在index.html中添加以下代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 3 App</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> </body> </html> ``` 10. 最后，在终端中运行以下命令来构建项目： ``` npm run build ``` 运行成功后，将在dist文件夹中生成一个bundle.js文件，该文件包含了所有的Vue组件和依赖项。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Lyrelion

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

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

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

打赏作者

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

抵扣说明：

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

余额充值