【Webpack】自动执行开发服务器 devServer

开发服务器&自动化

每次写完代码都需要手动输入指令才能编译代码,太麻烦了,我们希望一切自动化,即修改代码后服务器浏览器自动刷新。

1. 下载包

npm i webpack-dev-server -D

2. 配置

  • webpack.config.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [{// 用来匹配 .css 结尾的文件test: /.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "public/index.html"),}),],// 开发服务器devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器},mode: "development",
};

3. 运行指令

npx webpack serve

注意运行指令发生了变化

并且当你使用开发服务器时,所有代码都会在内存中编译打包,并不会输出到 dist 目录下。

开发时我们只关心代码能运行,有效果即可,至于代码被编译成什么样子,我们并不需要知道。

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

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

相关文章

深入浅出了解谷歌「Gemini大模型」发展历程

Google在2023年12月官宣了Gemini模型,随后2024年2月9日才宣布Gemini 1.0 Ultra正式对公众服务,并且开始收费。现在2024年2月14日就宣布了Gemini 1.5 Pro,史诗级多模态最强MoE首破100万极限上下文纪录!!!Gem…

Grafana入门:从0开始打造动态仪表板

Grafana入门:从0开始打造动态仪表板 Grafana是一个开源的数据可视化和监控工具,它支持多种数据源,如Prometheus、InfluxDB、Elasticsearch等。通过Grafana,我们可以轻松地创建漂亮的仪表盘,实时监控应用程序和服务的性…

数据分析 — Pandas 数据加载、存储和清洗

目录 一、文件读取1、常见文件读取函数2、read_csv()3、read_table()4、read_excel()5、read_json()6、read_html()7、大文件读取 二、数据保存1、csv2、excel3、json4、html5、MySQL1、连接数据库2、MySQL 存储到本地3、本地存储到 MySQL 三、数据清洗1、处理缺失值1、判断数据…

Aster实现一台电脑当两台使——副屏使用独立win账号

前言:笔者每年回家,都面临着想要和小伙伴一起玩游戏,但小伙伴没有电脑/只有低配电脑的问题。与此同时,笔者自身的电脑是高配置的电脑,因此笔者想到,能否在自己的电脑上运行游戏,在小伙伴的电脑上…

LaTeX中的documentclass命令:指定文档的类型和整体布局

诸神缄默不语-个人CSDN博文目录 documentclass 是 LaTeX 中一个基础且重要的命令,用于定义文档的整体布局和样式。这个命令告诉 LaTeX 编译器文档是属于哪一类的,比如是文章、报告、书籍等,每一类都有其预定义的格式和结构。 文章目录 基本语…

怎么恢复电脑重装前的数据?介绍几种有效的方法

在日常生活和工作中,电脑已成为我们不可或缺的工具。然而,有时候我们会遇到一些突发情况,比如电脑系统崩溃需要重新安装系统。在这个过程中,我们可能会失去一些重要的数据,比如照片、文档、视频等。这些数据可能包含着…

基于springboot车辆充电桩管理系统源码和论文

随着信息化时代的到来,管理系统都趋向于智能化、系统化,车辆充电桩管理系统也不例外,但目前国内仍都使用人工管理,市场规模越来越大,同时信息量也越来越庞大,人工管理显然已无法应对时代的变化,…

马斯克评 OpenAI 视频模型,接地气又一针见血

马斯克评 OpenAI Sora 昨天,OpenAI 发布了首个视频生成模型 Sora。 一位 X(前推特)用户分享了 Sora 官网所展示的生成视频:一名女子在东京街头漫步。 该用户评论称:"OpenAI 今天宣布了 Sora,它使用混合…

【力扣每日一题】力扣429N叉树的层序遍历

题目来源 力扣429N叉树的层序遍历 题目概述 给定一个 N 叉树,返回其节点值的层序遍历。(即从左到右,逐层遍历)。 思路分析 跟二叉树的层序遍历基本一致,只不过把向孩子节点列表添加左右节点该成了添加父节点的全部…

兵棋推演是离散问题,深度学习是连续问题

兵棋推演是指通过模拟和分析军事战斗的过程,以评估各种战略和战术决策的有效性和结果。它通常涉及到离散的行动和状态空间,例如在一个离散的棋盘上移动棋子、进行攻击等。 深度学习是一种机器学习方法,旨在通过大规模数据的训练来学习复杂的模…

为什么MySQL不建议使用TEXT字段?

当我们深入探讨“为什么MySQL不建议使用TEXT字段?”这一问题时,可以从一下多个方面来详细理解这个问题: 1. 性能问题 性能问题是MySQL不建议使用TEXT字段的一个重要原因。TEXT字段通常以外部存储方式保存,而不是像固定长度或可变…

C# winfrom实例:四路激光测距雷达数据采集和波形图绘制

1.所述产品 产品型号:TFmini Plus 相关资料下载地址:http://www.benewake.com/download 产品名称:TFmini Plus激光雷达模组制造商公司:北醒(北京)光子科技有限公司 2.产品功能:TFmini Plus是基…

USART--串口通信

目录 一、通讯的基本知识 1、串行通讯与并行通讯 2、 全双工、半双工及单工通讯 3、 同步通讯与异步通讯 4、通讯速率 二、串口通讯 1、物理层: 2、协议层: 3、STM32代码中使用过程串口步骤: 一、通讯的基本知识 1、串行通讯与并行通…

实现低功耗设计的嵌入式系统技术

(本文为简单介绍,观点来源网络) 在嵌入式系统设计中,追求低功耗已成为一个核心指标,旨在延长设备的运行时间并提升能效。实现这一目标的途径是多元的,涉及从硬件选型到软件算法的各个层面。 首先&#xf…

【Py/Java/C++三种语言详解】LeetCode每日一题240217【二叉树BFS】LeetCode429、N叉树的层序遍历

有LeetCode交流群/华为OD考试扣扣交流群可加 948025485 可上全网独家的 欧弟OJ系统 练习华子OD、大厂真题 绿色聊天软件戳 od1336了解算法冲刺训练 文章目录 题目链接题目链接题目描述解题思路DFS和BFS异同用队列维护的BFS 代码PythonJavaC时空复杂度 相关习题华为OD算法/大厂面…

基于MapVGL的地理信息三维度数据增长可视化

写在前面 工作中接触,简单整理博文内容为 基于MapVGL的地理信息维度数据增长可视化 Demo理解不足小伙伴帮忙指正 对每个人而言,真正的职责只有一个:找到自我。然后在心中坚守其一生,全心全意,永不停息。所有其它的路都…

2.17学习总结

tarjan 【模板】缩点https://www.luogu.com.cn/problem/P3387 题目描述 给定一个 �n 个点 �m 条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大。你只需要求出这个权值和。 允许多次经过一条边或者…

微信小程序步数返还的时间戳为什么返回的全是1970?

微信小程序步数返还的时间戳为什么返回的全是1970? 将返回的时间 乘以 1000 再 new Date() 转化就对了 微信返回的是秒S单位的,我们要转化为毫秒ms单位,才能进行格式化日期。 微信给我们下了个坑, 参考: https://d…

市场复盘总结 20240208

仅用于记录当天的市场情况,用于统计交易策略的适用情况,以便程序回测 短线核心:不参与任何级别的调整,采用龙空龙模式 一支股票 10%的时候可以操作, 90%的时间适合空仓等待 二进三: 进级率中 25% 最常用的…

LGAMEFI基于BPL公链开发的第一生态:开启RWA游戏娱乐与DeFi融合的新纪元

在去中心化金融(DeFi)与游戏娱乐的结合趋势中,BPL公链上的LGAMEFI项目代表了前沿的技术革新和市场领导。这种将web2上成熟页游进行RWA链改,不仅仅是将游戏热门领域融合,更是在寻找一种全新的参与者经验,将玩…