webpack配置vue3项目

已于 2022-04-29 18:55:13 修改
阅读量3.6k 收藏 11
点赞数 3
文章标签： vue.js webpack
于 2022-04-29 18:21:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53663696/article/details/124500042
版权

用webpack搭建Vue3项目

声明：本文章采用node的包管理工具和webpack。

一、项目需要的基本依赖

1.vue的依赖

声明一点，自从22年3月依赖vue的默认版本就变成了3.x所有后面需要@指定版本。

npm i vue

2.ui组件库依赖

组件库可以自己选择

npm install element-plus --save

3.AJAX请求库依赖（axios）

npm i axios

二、几个loader和webpack配置

  • webpack 打包
  • webpack-cli webpack命令行接口
  • vue-loader 把vue文件后缀编译
  • vue-template-compiler vue模板的编译
  • sass-loader 将sass文件转成css代码
  • css-loader 将css文件编译
  • style-loader 将模板中的style标签下的css进行编译
  • babel-loader 高级语法的兼容性问题
  • @babel/core babel的核心库
  • @babel/preset-env 兼容最新语法

1.引入库

代码如下（示例）：

npm i -D webpack webpack-cli vue-loader vue-template-compiler sass-loader sass css-loade style-loader babel-loader @babel/core @babel/preset-env

2.目录结构

在这里插入图片描述

三、main.js入口文件与index.html

1.main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App) // 创建vue实例
app.use(router) // 使用路由
app.mount('#app') // 挂载到id为app的div

2.index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  <title>脚手架学习</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

*四、webpack配置文件

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
  template: './public/index.html', // 这是html模板存放的地址
  filename: './index.html',
})
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /\.vue$/, use: ['vue-loader'] },
      { test: /\.s[ca]ss$/, use: ['style-loader', 'css-loader', 'scss-loader'] },
      { test: /\.(png|jpe?g|gif|svg|webp)$/, type: 'asset/resource' },
    ],
  },
  // 插件就让多一个功能
  plugins: [new VueLoaderPlugin(), htmlPlugin],
  devServer: {
    open: true, //打包完自动打开文件
    host: '127.0.0.1',
    port: 8080, //实时打包所使用的端口号
    client: {
      logging: 'none',
    },// 关闭客户端的log
  },
}

五、路由文件

import { createRouter, createMemoryHistory } from 'vue-router'

const routes = []

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

export default router

六、babel.config.js

module.exports = {
  presets: ['@babel/preset-env'],
}

更新中~

梦诺七棠
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack5配置之vue3
12-14
基于webpack5构建的vue3项目，可用来学习webpack5的常用配置，和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目，可用来学习webpack5的常用...
webpack打包vue项目基础配置
09-26
基于webpack4的一个针对vue基础项目的打包配置，对基础的vue项目进行简单的打包配置，可以支持less，scss，sass等css预编译，简单明了，教程：https://www.jianshu.com/p/81bfe6ba1c04
使用webpack打包vue项目
热门推荐
qq_42750982的博客
04-15 1万+
使用webpack打包vue项目 安装webpack工具，安装方式有两种：全局安装（命令：npm install -g webpack webpack-cli）以及安装在项目中，这里使用第二种： //在项目中安装，这里的-D表示运用到开发(development)环境 npm install -D webpack webpack-cli 在项目根目录新建一个webpack.config.js文件，配置打包时候需要的一些插件。**作用: 指示 webpack 干那些活(当你运行 webpack 指令
【Webpack】使用 Webpack 构建 Vue3+TS 项目
小秀的博客
06-14 564
shim.d.ts 文件是一个类型声明文件，用于告诉 TypeScript 编译器如何处理 Vue 的单文件组件（SFC）和其他自定义模块。为 Vue 的单文件组件和其他非 TypeScript 模块提供类型信息，以便在 TypeScript 项目中使用它们时能够正确地进行类型检查和代码提示。webpack5 以上的版本需要安装 webpack-cli。webpack-dev-server 开启一个本地服务。
(万字) webpack搭Vue项目
游小北的博客
11-15 3780
1. 我们平时都是使用 vue-cli 脚手架快速搭建项目（vue-cli 基于 webpack），可是我们不知道其中的原理与细节，导致我们在遇到一些细节问题无法自己配置解决。 2. 为了让我们能更好的了解 vue-cli 实现过程，我们需要学习使用 webpack 从一个 index.html 文件从零开始创建一个完整的项目（包含 babel、样式预处理器、vue、webpack插件、dev-server、proxy代理等，各自有关的详细内容可翻看我的主页 3.重点是掌握使用 webpack
WebPack实战 WebPack打包Vue项目
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-09 3002
文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1、config—index.js文件3.2、build—webpack.prod.conf.js 文件3.3、element ui 字体文件加载出错3.4、路由跳转出现js访问404问题四、关闭Webpack的debug模式五、Vue项目打包发布后，使浏览器WebPack中无法查看源码 前言 本篇博客是关于Webpack打包vue的配置以及一些问题解决整理，若文章中出现相关问题
vue3的webpack配置
weixin_52663662的博客
11-27 1944
1、首先导入对应的4个配置插件 npm install webpack@5.0 --save-dev npm install webpackbar -D npm i terser-webpack-plugin@5.0.2 -D npm i compression-webpack-plugin@5.0.1 -D 2、在vue.config.js的配置 const { defineConfig } = require("@vue/cli-service"); var path = req
webpack开发Vue配置
qq_33235582的博客
12-03 4613
在webpack的世界里，一张图片、一个css甚至一个字体，都成为模块（Module），彼此存在依赖关系，webpack就是来处理模块间的依赖关系的，并把它们进行打包。 webpack的主要适用场景是单页面富应用（SPA）。SPA通常是由一个html文件和一堆按需加载组成，它的html结构可能会非常简单，比如： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta
使用webpack搭建vue3的项目（新手）
mcymmycm的博客
05-27 6061
首先是对应的文件目录，
创建基于Webpack的Vue.js项目
逆境清醒的博客
03-19 4438
创建基于Webpack的Vue.js项目。一、Webpack简介。二、创建基于Webpack的Vue.js项目 1、前提条件(检查node和npm版本信息,升级你的 Node 版本)。2、安装Webpack、Vue.js。 3、创建基于Webpack的Vue.js项目。三、Webpack下的Vue.js项目文件结构。四、打开Vue项目管理器
vue项目webpack打包配置
weixin_43697548的博客
05-06 4594
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12)前言一、webpack配置1.配置vue.config.js2.配置DllPlugin提高构建和打包速度二、打包验证总结 前言 一、webpack配置 1.配置vue.config.js publicPath: './', outputDir: 'dist', assetsDir:"static", indexPath:'index.html', 2.配置DllPlu.
Webpack + vue2.0 构建vue项目初始化详细过程
weixin_44301648的博客
12-06 1297
1、第一步，在本地文件夹下（C盘或者D盘）新建一个文件夹（webpack-project）2、第二步，打开终端或者在新建的文件夹里右键打开PowerShell输入命令 ： npm init会生成一个package.json文件3、第三步，按照初始化项目结构创建以下文件： 4、在补充main.js之前，需要安装框架的基本依赖：但是后面启动项目时会发现版本报错问题，所以建议webpack-cli下载4.10.0版本使用 webpack-dev-server 来启动本地服务 3.webpack.co
手动使用webpack配置vue3开发环境
05-09
手动配置 Vue 3 开发环境需要以下步骤： 1. **安装基础依赖**：首先确保本地已经安装了 Node.js 和 npm。然后创建一个新的项目文件夹，通过 npm 初始化项目，运行 `npm init -y` 创建 package.json 文件。 2. **...
详解如何使用webpack在vue项目中写jsx语法
11-27
在Vue项目中使用jsx语法，主要是借助Webpack的配置和Babel插件的转换能力。Vue 2.0虽然原生不支持JSX，但由于其强大的虚拟DOM机制，开发者可以选择使用jsx来编写组件的渲染逻辑。jsx是一种在JavaScript中插入XML语法...
vue3+webpack项目代码
05-11
资源包里面包含vue3+webpack项目需要的相关依赖项代码和vue3+webpack项目所需要的编译、启动服务的相关代码，代码下载下来就能直接启动使用，另外还包含了vue3+webpack项目代码及其配置文件的详细讲解。
vue开启keep-alive缓存时，关于子组件上使用:key=“id“的问题以及解决方案
weixin_45549481的博客
08-02 191
2、致命错误，修改URL的id时，缓存之前有数据，子组件销毁重建，请求接口也有数据，但是因为keep-alive缓存了组件实例而不是组件的数据，表格的数据丢失；2、:key=“timeStap”，结合activated、deactivated —— —— keep-alive缓存activated时，会重新请求。1、切换tag，会触发id的变更，再次切回来时，将会触发表格销毁重建，重新请求数据，局部刷新表格的缓存丢失；特定场景下，必须使用:key="id"时，可以考虑下面的两个方式。
使用 Vue.js 构建大屏可视化系统
最新发布
qq_42072014的博客
08-04 708
通过上述步骤，你已经具备了构建一个完整的 Vue.js 大屏可视化系统的知识。根据具体需求，你还可以添加更多高级功能，如动态加载图表数据、实时数据流等。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1406
本文介绍了电子签名、图片合成、及预览功能
webpack配置vue.config.js
10-18
好的，关于webpack配置vue.config.js，我可以给你一些基本的信息。vue.config.js是一个可选的配置文件，用于对vue-cli项目进行个性化配置。在这个文件中，你可以对webpack进行一些自定义配置，例如修改webpack的entry和output、添加loader和plugin等等。 下面是一个简单的vue.config.js文件示例： ``` module.exports = { // 修改webpack的entry configureWebpack: { entry: './src/main.js' }, // 添加loader chainWebpack: config => { config.module .rule('markdown') .test(/\.md$/) .use('html-loader') .loader('html-loader') .end() .use('markdown-loader') .loader('markdown-loader') .end() }, // 添加plugin pluginOptions: { foo: { // options for foo plugin } } } ``` 在这个示例中，我们修改了webpack的entry，添加了一个处理markdown文件的loader，并且添加了一个名为foo的plugin。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值