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

webpack-(plugin,本地服务器,路径别名,安装vue)

安装vue

npm i vue-loader -D npm i vue

编写一个vue文件:
在这里插入图片描述
在index.html中设置 一个id为app的div
在这里插入图片描述
将vue文件挂载到app中

在这里插入图片描述
vue比较特殊,除了使用loader外,还使用了plugin

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test:/\.vue/,use:"vue-loader"}],},plugins: [new VueLoaderPlugin()],
};

webpack中 resolve模块的解析和拓展名

resolve用于模块的解析,在开发中使用各种的模块依赖,resolve可以帮助我们从它们的require/import语句中找到合适的代码。webpack使用 enhanced-resolve来解析文件路径。
webpack能解析的三种路径:
**绝对路径:**已经获取文件的绝对路径,不会再解析。

相对路径:在这种情况下 使用Import或require导入的资源所处的目录会被当成上下文目录。import/require中的相对路径会和上下文目录的路径拼接,形成绝对路径。

模块路径:(import {createApp} from “vue”)默认是从 node_modules中查找。可以通过设置别名的方式来识别模块路径。

如果一个文件有拓展名会直接打包例如import index from "./vue/index.vue";会直接打包,如果没有(import index from "./vue/index")则需要需要使用resolve.extensions选项来作为文件的拓展名。

resolve中的 extensions和alias

extensions:自动添加拓展名,在导入文件是可以不用带拓展名如import index from "./vue/index.vue"可以写为import index from "./vue/index",他会自动补齐拓展名。

alias:配置路径别名。在导入时可能会有 …/…/这样的,当路径特别长时会很麻烦.

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},resolve: {extensions: [".js", ".ts", ".tsx", ".jsx", ".cjs", ".vue"],//这里的"./src/vue"路径 是相对于webpack的,以webpack.config.js为基准的。// 路径别名:  xxx路径alias: {"@": path.resolve(__dirname, "./src/vue"),},},module: {rules: [],},plugins: [],
};

plugin

loader只能用于特定模块的转化,plugin插件比loader的用途更广,他还可以进行打包优化,变量的注入等。
在这里插入图片描述

cleanwebpackplugin 打包前会自动删除上次打包后的文件

npm i clean-webpack-plugin -D

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},resolve: {extensions: [],alias: { },},module: {rules: [],},plugins: [new VueLoaderPlugin(), new CleanWebpackPlugin()],
};

打包前还有之前的img(这两个目录是之前使用图片时设置的)目录
在这里插入图片描述
打包后可以看到之前的Img目录已经删除
在这里插入图片描述

另外output.clean也可以在打包前清空之前的目录https://www.webpackjs.com/configuration/output/#outputclean
在这里插入图片描述

html-webpack-plugin

打包后的文件中他本身因该有一个html文件而不是通过index.html访问
npm i html-webpack-plugin -D

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},resolve: {},module: {rules: [ ],},plugins: [new VueLoaderPlugin(),new CleanWebpackPlugin(),//可以指定生成的html的模板new HtmlWebpackPlugin({title: "test项目",template: "./src/index.html",}),],
};

这个模板中还可以使用一些变量<%= xxx%>,htmlWebpackPlugin.options可以获取在HtmlWebpackPlugin中定义的title

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="icon" href="favicon.ico" /></head><body><div id="app"></div><div><%= htmlWebpackPlugin.options.title %></div><script src="../build/bundle.js"></script></body>
</html>

definePlugin

允许在编译时配置一些全局变量,不用安装

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},resolve: {},module: {rules: [],},plugins: [new VueLoaderPlugin(),new CleanWebpackPlugin(),new DefinePlugin({BASE_URL: "'./'",}),new HtmlWebpackPlugin({title: "test项目",template: "./src/index.html",}),],
};

在html中使用
在这里插入图片描述
打包后的结果:
在这里插入图片描述
还可以在js中使用例如console.log(BASE_URL)

mode

设置开发或生产模式,默认是production。
可选值有 none|production|development

在这里插入图片描述

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
module.exports = {mode: "development",entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},resolve: {},module: {rules: [],},plugins: [new VueLoaderPlugin(),new CleanWebpackPlugin(),new DefinePlugin({BASE_URL: "'./'",}),new HtmlWebpackPlugin({title: "test项目",template: "./src/index.html",}),],
};

在这里插入图片描述

搭建本地服务器

一般有两种方式访问查看html:

  1. 使用npm run build 打包后再访问Html
  2. 使用vscode的插件live server或直接打开html.
    这些方式都不能实时的监听页面的变化,改动文件后,要刷新页面或重新打包,webpack提供了三种方式可以完成自动编译:
    1.webpack watch mode
  3. webpack-dev-server(常用)
    3.webpack-dev-middleware

webpack-dev-serer

npm i webpack-dev-server -D
在配置中加上devServer
在这里插入图片描述
添加server命令

  "scripts": {"build": "npx webpack --config wk.config.js","server": "npx webpack server --config wk.config.js "},

启动命令后还需要手动打开网址访问
在这里插入图片描述

热更新 HMR

Hot Module Replacement:模块热替换,在程序运行的过程中,会替换、添加、删除模块,不用刷新页面。
热更新通过以下方式提高开发速度:
在这里插入图片描述
默认情况下已经提供了HMR,只需要开启就行:

  devServer:{hot:true}

对于一些框架,早已经有了成熟的解决方案,安装脚手架时已经配好不需要再配置。

host设置主机地址(了解)

默认时localhost,还可以设置成其他的例如0.0.0.0
在这里插入图片描述

localhost和0.0.0.0的区别:
在这里插入图片描述

port open compress

port:监听的端口号默认是8080
open: 是否打开浏览器,默认是false
compress:是否为静态文件开启gzip compression

  devServer: {hot: true,port: "7070",host: "127.0.0.1",compress: true,open: true,},

代理服务器

  devServer: {proxy: {'/api': {target: 'http://localhost:3000',pathRewrite: {'^/api' : ''} ///api 被替换成""}}//axios("/api/user") =  http://localhost:3000/user   

到目前为止所有配置

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
module.exports = {mode: "development",entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},resolve: {extensions: [".js", ".ts", ".tsx", ".jsx", ".cjs", ".vue"],alias: {"@": path.resolve(__dirname, "./src/vue"),},},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.scss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.(png|jpe?g|gif|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 4 * 1024,},},generator: {filename: "img/[hash][ext]",},},{test: /\.js$/,use: {loader: "babel-loader",},},{test: /\.vue/,use: "vue-loader",},],},plugins: [new VueLoaderPlugin(),new CleanWebpackPlugin(),new DefinePlugin({BASE_URL: "'./'",}),new HtmlWebpackPlugin({title: "test项目",template: "./src/index.html",}),],devServer: {hot: true,//  port: "7070",///  host: "127.0.0.1",//  compress: true,//  open: true,proxy: {'/api': {target: 'http://localhost:3000',pathRewrite: {'^/api' : ''}}},
};

相关文章:

webpack-(plugin,本地服务器,路径别名,安装vue)

安装vue npm i vue-loader -D npm i vue 编写一个vue文件&#xff1a; 在index.html中设置 一个id为app的div 将vue文件挂载到app中 vue比较特殊&#xff0c;除了使用loader外&#xff0c;还使用了plugin const path require("path"); const { VueLoaderPlugin …...

http请求头导致了dial tcp:lookup xxxx on 10.43.0.10:53 no sunch host

事实证明人有的时候也不能太偷懒&#xff0c;太偷懒容易给自己埋坑。 问题的背景&#xff1a; web端调用服务A&#xff0c;服务A异步调用服务B。服务A有四个场景需要调用服务B&#xff0c;所以&#xff0c;服务A中封装了一个公用的方法&#xff0c;唯一的区别是&#xff0c;场…...

想要设计放大电路,必须掌握哪些?

放大电路是电子系统中的核心组成部分&#xff0c;其设计好坏将直接影响到整个系统的性能&#xff0c;对电子工程师来说&#xff0c;在设计放大电路时&#xff0c;必须掌握且关注多方面&#xff0c;以此确保电路的稳定性和放大效果&#xff0c;那么需要注意哪些&#xff1f; 1、…...

每天五分钟计算机视觉:基于卷积操作完成滑动窗口的图片分类?

本文重点 我们前面学习了使用不同大小的滑动窗口来滑动图片,然后切分成许多小的图片,然后依次应用到我们已经训练好的图像分类模型中,但是这种方式效率太低了,本节课程我们学习一种新的方式,来看一下如何并行识别这些剪切的图片。 原始结构 首先我们先来看一下,如何把…...

UI设计/交互设计/视觉设计项目汇报/作品集Figma/PPT模板

作为UI设计/交互设计/视觉设计师&#xff0c;创建作品集对于向潜在客户或雇主展示您的技能、创造力和风格至关重要。以下分步指南可帮助您创建令人印象深刻的作品集&#xff1a; 选择您的最佳作品&#xff1a;选择您最强大且最相关的设计项目&#xff0c;将其纳入您的作品集。…...

25、Lua 学习笔记之三(高阶话题)

Lua 学习笔记之三 高阶话题迭代实例代码有关迭代的描述 协作线程实例代码有关协作线程的描述 高阶话题 迭代 实例代码 --迭代 local function enum(array)local index 1return function()local ret array[index]index index 1return retend endlocal function foreach(a…...

企业网盘搭建——LNMP

php包链接&#xff1a;https://pan.baidu.com/s/1RElYTQx320pN6452N_7t1Q?pwdp8gs 提取码&#xff1a;p8gs 网盘源码包链接&#xff1a;https://pan.baidu.com/s/1BaYqwruka1P6h5wBBrLiBw?pwdwrzo 提取码&#xff1a;wrzo 目录 一.手动部署 二.自动部署 一.手动部署 …...

Go语言异常处理方式

Go 语言没有传统的异常处理机制&#xff0c;如 Java、C 或 Python 中的 try-catch 语句。取而代之&#xff0c;Go 采用了基于返回错误值和 panic/recover 机制的混合模式来进行错误处理。以下是 Go 语言中处理异常&#xff08;或称错误&#xff09;的两种主要方式&#xff1a; …...

时序分析基本知识点

【FPGA开发/IC开发之时序约束最全面的归纳总结】时序路径基本概念及时序约束分析方法_时序约束指令-CSDN博客...

ELK(Elasticsearch+Logstash+Kibana)日志分析系统

目录 前言 一、ELK日志分析系统概述 1、三大组件工具介绍 1.1 Elasticsearch 1.1.1 Elasticsearch概念 1.1.2 关系型数据库和ElasticSearch中的对应关系 1.1.3 Elasticsearch提供的操作命令 1.2 Logstash 1.2.1 Logstash概念 1.2.2 Logstash的主要组件 1.2.3 Logsta…...

【投稿优惠-EI稳定检索】2024年地理信息技术与遥感测绘国际学术会议(ICGITRSM 2024)

2024 International Conference on Geographic Information Technology and Remote Sensing Mapping (ICGITRSM 2024) ●会议简介 2024年地理信息技术与遥感测绘国际学术会议将聚焦于地理信息技术及遥感测绘领域的最新发展与应用。本次会议汇聚了来自世界各地的顶尖专家和学者…...

MySQL的内外连接

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;MySQL &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容主要介绍了MySQL中的内外连接 文章目录 MySQL的内外连接…...

Pandas连接MySQL数据库

pandas是一个强大的Python工具包&#xff0c;能够快速帮助我们做很多数据处理。但是在利用pandas连接数据库时&#xff0c;也会遇到很多问题&#xff0c;在此我总结了一个相对较为简单的连接范式&#xff0c;供大家参考学习。 先上代码&#xff1a; import pandas as pd# 数据…...

2024华中杯数学建模参考思路+完整代码+后续成品论文预约

&#xff08;完整版资料获取在文末哦&#xff09; 关于24年华中杯的更新进度&#xff0c;大家可以参考我们前年比赛。 22年华中杯思路&#xff1a; 大家也可以看这一篇 A题思路 一订单包含多种货品&#xff0c;每种商品有不同的数量&#xff0c;题目没说订单的需求时间&am…...

ARM_day8:基于iic总线的通信

一、IIC总线的基本概念&#xff1a; iic总线是一种带应答的同步的、串行、半双工的通信方式&#xff0c;支持一个主机对应多个从机。它有一根SCL&#xff08;时钟线&#xff09;和一根SDA&#xff08;数据线&#xff09;组成&#xff0c;由于只有一根数据线&#xff0c;所以它是…...

33、Lua Cocos2d-x使用Luajit实现加密

项目要求对lua脚本进行加密&#xff0c;查了一下相关的资料 &#xff0c;得知lua本身可以使用luac将脚本编译为字节码(bytecode)从而实现加密&#xff0c;试了一下&#xff0c;确实可行。下面是使用原生的lua解释器编译字节码&#xff1a; 新建一个名为1.lua的文件&#xff0c;…...

spring 集成 mybatis

spring 集成 mybatis 1、spring对junit的支持1.1、对junit4的支持1.2 对junit5的支持 2、Spring6集成MyBatis3.52.1 实现步骤2.2 实现 1、spring对junit的支持 1.1、对junit4的支持 依赖 <?xml version"1.0" encoding"UTF-8"?> <project xml…...

rtpengine 的端点学习模式

端点学习模式&#xff08;endpoint-learning&#xff09; delayed|immediate|off|heuristic delayed 延迟模式&#xff0c;等待 3 秒钟&#xff0c;然后再提交到端点地址 immediate 立即模式&#xff0c;收到第一个 rtp 包之后立即学习&#xff0c;不等 3 秒 off 关闭模式…...

Windows 安装 A UDP/TCP Assistant 网络调试助手

Windows 安装 A UDP/TCP Assistant 网络调试助手 0. 引言1. 下载地址2. 安装和使用 0. 引言 需要调试一个实时在线聊天程序&#xff0c;安装一个UDP/TCP Assistant 网络调试助手&#xff0c;方便调试。 1. 下载地址 https://github.com/busyluo/NetAssistant/releases 2. 安…...

web自动化系列-selenium的3种等待方式(十一)

在ui自动化测试中&#xff0c;几乎出现问题最多的情况就是定位不到元素 &#xff0c;当你的自动化在运行过程中 &#xff0c;突然发现报错走不下去了 。很大概率就是因为找不到元素 &#xff0c;而找不到元素的一个主要原因就是页面加载慢 &#xff0c;代码运行速度快导致 。 …...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

土建施工员考试:建筑施工技术重点知识有哪些?

《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目&#xff0c;核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容&#xff0c;附学习方向和应试技巧&#xff1a; 一、施工组织与进度管理 核心目标&#xff1a; 规…...

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...

学习 Hooks【Plan - June - Week 2】

一、React API React 提供了丰富的核心 API&#xff0c;用于创建组件、管理状态、处理副作用、优化性能等。本文档总结 React 常用的 API 方法和组件。 1. React 核心 API React.createElement(type, props, …children) 用于创建 React 元素&#xff0c;JSX 会被编译成该函数…...