Webpack5 搭建Vue项目(进阶版)

Webpack5 搭建Vue项目(进阶版)

提示:中间隔了好长时间,我胡汉三又回来继续更新了!!!😂😂😂


文章目录

  • Webpack5 搭建Vue项目(进阶版)
  • 前言
  • 一、进阶版本有哪些特点?
  • 二、主要的文件代码如下
    • 1.设置一个公共配置 webpack.common文件
    • 2.设置一个【dev】config文件
    • 3.设置一个【prod】config文件
  • 三、配置 package.json文件
    • 1.代码如下
  • 总结如下(一定要看)


前言

提示:文章涉及的一些内容仅供参考:

大多数情况下,大家在项目开发的过程中,基本很少去说让开发人员去自助的搭建一个Vue项目。基本都是使用现成的一些模版项目,直接在上面进行一个二次的开发(当然这样也是最节省时间!!!!!)


一、进阶版本有哪些特点?

1. 首先进阶版本对【开发环境】和【线上环境】的配置进行了区分。
2. 本文的【示例】主要是代理服务器的一个体现(主要是有这样的思想,也方便后续想要对项目进行懒加载,分包等优化配置进行环境区分。便于管理项目)

这里就不做过多的赘述了,大家可以看下面的第二步骤

二、主要的文件代码如下

1.设置一个公共配置 webpack.common文件

代码如下(示例):

const path =require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports={entry:'./src/index.js',output:{path:path.resolve(__dirname,'dist'),filename:'[name].bundle.js',clean: true,},module:{rules:[{test: /\.css$/i,use: ["style-loader", "css-loader"],},{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},{test: /\.vue$/,loader: 'vue-loader'}]},plugins:[new HtmlWebpackPlugin({template:'./public/index.html',title:'webpackTest',filename:'index.html'}),new VueLoaderPlugin()]}

2.设置一个【dev】config文件

代码如下(示例):

const {merge}=require('webpack-merge')
const common =require('./webpack.common.js')module.exports=merge(common,{mode:'development',devServer:{static: './public',open:true,}
})

该处使用的url网络请求的数据。


3.设置一个【prod】config文件

const {merge}=require('webpack-merge')const common =require('./webpack.common.js')module.exports=merge(common,{mode:'production'
})

三、配置 package.json文件

1.代码如下

    // dev 代表的就是开发环境"dev":"webpack serve --config ./webpack.dev.js",//build 代表的是线上环境"build":"webpack --config ./webpack.prod.js"

总结如下(一定要看)

根据上面的思路,我们可以确定。如果后续我们的项目体积太大,就可以在prod.js中去配置对应的 webpack plugin去满足我们的项目分包懒加载等打包的操作

1. 后续会去更新,如何在自己的项目中集成 eslint 和 prettier 工具去管理咱们项目的代码规范问题2. 集成到Git的生命周期中的代码提交监测和修复的功能

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

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

相关文章

python实现语音识别

1. 首先安装依赖库 pip install playsound # 该库用于播放音频文件 pip install speech_recognition # 该库用于语音识别 pip install PocketSphinx # 语音识别模块中只有sphinx支持离线的,使用该模块需单独安装 pip install pyttsx3 # 该库用于将文本转换为语音播…

app自动化测试(Android)

Capability 是一组键值对的集合(比如:"platformName": "Android")。Capability 主要用于通知 Appium 服务端建立 Session 需要的信息。客户端使用特定语言生成 Capabilities,最终会以 JSON 对象的形式发送给 …

【C语言】入门——指针

目录 ​编辑 1.指针是什么 2.指针类型和指针运算 2.1指针-整数 2.2指针-指针 2.3指针的关系运算 3.野指针 3.1野指针成因 👍指针未初始化: 👍指针越界访问: 👍指针指向空间释放: 3.2如何规避野指针 …

以antd为例 React+Typescript 引入第三方UI库

本文 我们来说说 第三方UI库 其实应用市场上的 第三方UI库都是非常优秀的 那么 react 我们比较熟的肯定还是 antd 我们还是来用它作为演示 这边 我们先访问他的官网 https://3x.ant.design/index-cn 点击开始使用 在左侧 有一个 在 TypeScript 中使用 通过图标我们也可以看出…

【Linux从入门到精通】通信 | 管道通信(匿名管道 命名管道)

本派你文章主要是对进程通信进行详解。主要内容是介绍 为什么通信、怎么进行通信。其中本篇文章主要讲解的是管道通信。希望本篇文章会对你有所帮助。 文章目录 一、进程通信简单介绍 1、1 什么是进程通信 1、2 为什么要进行通信 1、3 进程通信的方式 二、匿名管道 2、1 什么是…

【OpenCV入门】第七部分——图像的几何变换

文章结构 缩放dsize参数实现缩放fx参数和fy参数实现缩放 翻转仿射变换平移旋转倾斜 透视cmath模块 缩放 通过resize()方法可以随意更改图像的大小比例: dst cv2.resize(src, dsize, fx, fy, interpolation)src: 原始图像dsize: 输出图像的…

华为云云服务器评测|云耀云服务器L实例快速部署MySQL使用指南

文章目录 前言云耀云服务器L实例介绍什么是云耀云服务器L实例?产品优势智能不卡顿价优随心用上手更简单管理更省心 快速购买查看优惠卷购买 安装MySQL重置密码安装更新apt的软件源列表安装MySQL 设置用户名、密码、权限配置安全组 总结 前言 哈喽大家好&#xff0c…

设置Linux CentOS7桥接模式连网

在虚拟机上安装centos7系统后,首要任务就是设置网络。 我们在文章《设置linux centos7连接网络》中讨论了如何设置NAT模式连网。本文讨论如何在设置好NAT模式后,调换为桥接模式。 仍采用图形化方式设置方法。 一、查看物理机网络 把虚拟机设置为桥接…

el-form内容重置(解决点击保存关闭后再点击新增会有编辑携带的数据的问题)

主要代码&#xff1a; this.$refs[ruleForm].resetFields() <template><div class"add-edit-coupon"><el-dialog title"商品优惠券" top"10vh" :visible.sync"dialogVisible" width"660px" :before-close&…

Doris workload group实战

1.创建测试用户&#xff1a;创建一个用户名为test&#xff0c;密码为test 的用户&#xff1a; create user test% IDENTIFIED BY test;给测试用户赋权&#xff1a;给用户test赋予数据库test.* 权限 grant SELECT_PRIV,LOAD_PRIV,CREATE_PRIV,ALTER_PRIV ON test.* TO test;开…

信息系统概述-生命周期-开发方法

信息系统概述-生命周期 考点分析信息系统概述信息系统分类企业目前所使用的具体的信息化系统信息系统的生命周期&#xff08;重要&#xff09;信息系统的开发方法&#xff08;重要&#xff09; 考点分析 每年都会考3分&#xff0c;2分会超纲 信息系统概述 信息系统分类 业务处理…

时间序列分析:掌握平稳性的概念

摄影&#xff1a;Chris Lawton on Unsplash 一、说明 平稳性是时间序列问题中的一个关键概念。它是指统计属性&#xff08;如均值、方差和协方差&#xff09;随时间变化的稳定性。为了建立有效的预测模型并确定时间序列数据中有意义的模式&#xff0c;了解平稳性的概念以及它与…

Spring MVC 之MVC 体系结构、什么是SpringMVC

Spring MVC简介 MVC 体系结构三层架构MVC设计模式 Spring MVC 是什么&#xff1f;扩展知识Spring模块Data Access/Integration&#xff08;数据访问/集成&#xff09;Web&#xff08;网络层&#xff09;AOP&#xff08;面向切面&#xff09;Messaging&#xff08;消息传送&…

文字验证码:简单有效的账号安全守卫!

前言 文字验证码不仅是一种简单易懂的验证方式&#xff0c;同时也是保护您的账号安全的重要工具。通过输入正确的文字组合&#xff0c;您可以有效地确认自己的身份&#xff0c;确保只有真正的用户才能访问您的账号。 HTML代码 <script src"https://cdn6.kgcaptcha.…

java八股文面试[数据库]——Page页的结构

mysql中数据是存储在物理磁盘上的&#xff0c;而真正的数据处理又是在内存中执行的。由于磁盘的读写速度非常慢&#xff0c;如果每次操作都对磁盘进行频繁读写的话&#xff0c;那么性能一定非常差。为了上述问题&#xff0c;InnoDB将数据划分为若干页&#xff0c;以页作为磁盘与…

算法通关村第十九关——最小路径和

LeetCode64. 给定一个包含非负整数的 m n 网格 grid,请找出一条从左上角到右下角的路径&#xff0c;使得路径上的数字总和为最小。 输入&#xff1a;grid[[1,3,1],[1,5,1],[4,2,1]] 输出&#xff1a;7 解释&#xff1a;因为路径1→3→1→1→1的总和最小。 public int minPath…

Qt鼠标点击事件处理:按Escape键退出程序

创建项目 Qt 入门实战教程&#xff08;目录&#xff09; 首先&#xff0c;创建一个名称为QtKeyEscape的Qt默认的窗口程序。 参考 &#xff1a;Qt Creator 创建 Qt 默认窗口程序 Qt响应键盘Escape事件 打开Qt Creator >>编辑 >> 项目 >> Headers>> …

【iVX】iVX的低代码未来发展趋势:加速应用开发的创新之路

简介&#xff1a; 随着数字化转型的飞速发展&#xff0c;企业和组织对快速开发和交付高质量应用的需求越来越迫切。低代码开发平台作为一种创新的解决方案&#xff0c;极大地简化了应用程序的开发过程。在这一领域&#xff0c;iVX低代码平台作为领先的创业公司&#xff0c;正在…

Python小知识 - Python爬虫进阶:如何克服反爬虫技术

Python爬虫进阶&#xff1a;如何克服反爬虫技术 爬虫是一种按照一定的规则&#xff0c;自动抓取网页信息的程序。爬虫也叫网页蜘蛛、蚂蚁、小水滴&#xff0c;是一种基于特定算法的自动化程序&#xff0c;能够按照一定的规则自动的抓取网页中的信息。爬虫程序的主要作用就是从一…

python基础知识

1、不使用反转函数&#xff0c;将字符串逆序 str "abcdefg" str[::-1]2、求从10到100中能被3与5整除的数和 a[] for i in range(10,100):if i%3 0 and i%50:a.append(i) print(a,sum(a))3、什么是python 一种解释性语言、动态语言、python中一切都是对象、目前在…