当前位置: 首页 > 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;代码运行速度快导致 。 …...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

Python的__call__ 方法

在 Python 中&#xff0c;__call__ 是一个特殊的魔术方法&#xff08;magic method&#xff09;&#xff0c;它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时&#xff08;例如 obj()&#xff09;&#xff0c;Python 会自动调用该对象的 __call__ 方法…...