当前位置: 首页 > news >正文

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的生命周期中的代码提交监测和修复的功能

相关文章:

Webpack5 搭建Vue项目(进阶版)

Webpack5 搭建Vue项目(进阶版) 提示:中间隔了好长时间,我胡汉三又回来继续更新了!!!😂😂😂 文章目录 Webpack5 搭建Vue项目(进阶版)前…...

论文阅读:Distortion-Free Wide-Angle Portraits on Camera Phones

论文阅读:Distortion-Free Wide-Angle Portraits on Camera Phones 今天介绍一篇谷歌 2019 年的论文,是关于广角畸变校正的。 Abstract 广角摄影,可以带来不一样的摄影体验,因为广角的 FOV 更大,所以能将更多的内容…...

力扣每日一题---207. 课程表

Problem: 207. 课程表 文章目录 解题方法复杂度Code 解题方法 y总的 Topsort 模板题 复杂度 时间复杂度: 添加时间复杂度, 示例: O ( n ) O(n) O(n) 空间复杂度: 添加空间复杂度, 示例: O ( n ) O(n) O(n) Code class Solution {int res 0; public…...

在Kubernetes环境中有关Nginx Ingress与API Gateway的连接问题

文章目录 小结问题解决参考 小结 在Kubernetes环境中是通过Nginx Ingress来从外部访问Kubernetes内部的环境,并用API Gateway来分发请求,碰到了 502 Bad gateway.的问题,并尝试解决。 问题 从外部通过Nginx Ingress访问Kubernetes内部的环…...

c语言练习44:深入理解strstr

深入理解strstr strstr作用展示&#xff1a; #include <stdio.h> #include <string.h> int main() {char str[] "This is a simple string";char* pch;pch strstr(str, "simple");/*strncpy(pch, "sample", 6);*/printf("%s…...

渗透测试漏洞原理之---【业务安全】

文章目录 1、业务安全概述1.1业务安全现状1.1.1、业务逻辑漏洞1.1.2、黑客攻击目标 2、业务安全测试2.1、业务安全测试流程2.1.1、测试准备2.1.2、业务调研2.1.3、业务建模2.1.4、业务流程梳理2.1.5、业务风险点识别2.1.6 开展测试2.1.7 撰写报告 3、业务安全经典场景3.1、业务…...

CentOS查看CPU、内存、网络流量和磁盘 I/O

安装 yum install -y sysstat sar -d 1 1 rrqm/s: 每秒进行 merge 的读操作数目。即 delta(rmerge)/s wrqm/s: 每秒进行 merge 的写操作数目。即 delta(wmerge)/s r/s: 每秒完成的读 I/O 设备次数。即 delta(rio)/s w/s: 每秒完成的写 I/O 设备次数。即 delta(wio)/s rsec/s:…...

无人机航线规划

无人机航线规划&#xff0c;对于无人机的任务执行有着至关重要的作用&#xff0c;无人机在从起点飞向目的点的过程中&#xff0c;如何规划出一条安全路径&#xff0c;并且保证该路径代价最优&#xff0c;是无人机航线规划的主要目的。其中路径最优的含义是&#xff0c;在无人机…...

react中受控组件与非受控组件

受控组件与非受控组件 受控组件: 其值由 React 控制的组件,通常使用 state 来控制和修改组件的值。 例如受控的 组件: class NameForm extends React.Component {constructor(props) {super(props);this.state {value: };}handleChange (event) > {this.setState({val…...

【网络教程】如何解决Docker删除镜像和容器后磁盘空间未释放的问题

文章目录 问题分析解决方案删除未使用的容器删除未使用的镜像删除未使用的数据卷调整Docker数据存储路径问题分析 当删除Docker镜像和容器后,磁盘空间并未释放,这可能导致磁盘空间不足。造成此问题的原因包括: Docker镜像和容器的删除策略:默认情况下,Docker不会立即删除…...

Python中的进度条显示方案

迷途小书童 读完需要 3分钟 速读仅需 1 分钟 大家好&#xff0c;我是迷途小书童! tqdm 是一个非常常用的 Python 进度条库&#xff0c;它可以在循环迭代和 IO 操作期间添加一个进度条&#xff0c;直观地显示循环迭代的进程。 tqdm 是在 2013 年发布的&#xff0c;目的是为 Pyth…...

2023-09-05力扣每日一题

链接&#xff1a; 2605. 从两个数字数组里生成最小数字 题意&#xff1a; 两个数组都只包含1-9的数字&#xff0c;求一个最小数&#xff0c;两个数组内都要有它的其中一位 解&#xff1a; 要么是个位数要么是十位数&#xff0c;存一下数量和两边的最小数即可 实际代码&am…...

ODC现已开源:与开发者共创企业级的数据库协同开发工具

OceanBase 开发者中心&#xff08;OceanBase Developer Center&#xff0c;以下简称 ODC&#xff09;是一款开源的数据库开发和数据库管理协同工具&#xff0c;从首个版本上线距今已经发展了三年有余&#xff0c;ODC 逐步由一款专为 OceanBase 打造的开发者工具演进成为支持多数…...

生成克隆钓鱼网站与对win7进行后渗透操作

目录 目录 前言 系列文章列表 思维导图 1&#xff0c;实验涉及复现环境 2&#xff0c;CS的介绍 2.1,CS的简介 2.2,CS的主要功能 3&#xff0c;CS的安装 3.1,将cobalt_strike_4.5文件夹放到kali中 3.1,放入过程中的注意事项 3.2,如图所示 4,配置工具 4.1,进入c…...

Ubuntu18中NVIDIA,cuda,cudnn,pytorch安装

注意&#xff1a;nvidia驱动和cuda,cudnn,pytroch,python的对应关系 linux安装pytorch&#xff08;包括cuda与cudnn&#xff09;_linux清华园按照pytorch1.12_BryceRui的博客-CSDN博客 安装流程&#xff1a;安装cuda&#xff08;包括nvidia驱动&#xff09; cudnn python安装…...

MATLAB中M文件编写

简介 所谓M文件就是将处理问题的各种命令融合到一个文件中&#xff0c;该文件以.m为扩展名。然后&#xff0c;由MATLAB系统编译M文件&#xff0c;得出相应的运行结果。M文件具有相当大的可开发性和扩展性。M文件有脚本文件和函数文件两种。脚本文件不需要输入参数&#xff0c;…...

企业数字化神经网络

随着数字化时代的到来&#xff0c;数据已经成为企业战略性资源和重要的生产要素。企业数字化转型的核心是充分开发和利用数据资源&#xff0c;以数据为驱动&#xff0c;对业务流程进行重构与创新&#xff0c;从而提升企业的核心竞争力。业务系统是企业数据资源的源头&#xff0…...

C++this指针

本文旨在讲解C中this关键字&#xff0c;以及其相关作用&#xff01; 定义 this 是 C 中的一个关键字&#xff0c;也是一个 const 指针&#xff0c;它指向当前对象&#xff0c;通过它可以访问当前对象的所有成员。 this的介绍 下面来看一下关于this这个关键字的实例&#xff0…...

【初阶C语言】操作符1--对二进制的操作

前言&#xff1a;本节内容介绍的操作符&#xff0c;操作的对象是二进制位。所以前面先介绍整数的二进制位 一、二进制位介绍 1.二进制介绍 &#xff08;1&#xff09;整数的二进制表示形式有三种&#xff1a;原码、反码和补码。 &#xff08;2&#xff09;原码、反码和补码的…...

安装pyscipopt

安装pyscipopt Conda会自动安装SCIP&#xff0c;因此所有内容都可以通过单个命令安装&#xff1a; GitHub - scipopt/PySCIPOpt: Python interface for the SCIP Optimization Suite conda create --name myenv python3.8 # 创建新环境 conda activate myenv # 激活新环境 …...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...