webpack搭建开发环境

webpack搭建开发环境

  • 一.webpack开发模式
  • 二.webpack打包模式
  • 三.webpack打包模式应用
  • 四.Webpack 前端注入环境变量
  • 五.Webpack 开发环境调错 source map
  • 六. Webpack 设置解析别名路径
  • 七.优化-CDN的使用
  • 八.多页面打包
  • 九.优化-分割公共代码

一.webpack开发模式

作用:启动 Web 服务,打包输出源码在内存,并会自动检测代码变化热更新到网页,不用自己一直重新打包
步骤;
1.下载 webpack-dev-server 软件包到当前项目

npm i webpack-dev-server --save-dev

2.配置自定义命令,并设置打包的模式为开发模式
在webpack.config.js中设置

// ...
module.exports = {
// ...mode: 'development'
}

在package.json中设置

"scripts": {
// ..."dev": "webpack serve --mode=development"
},

3.使用 npm run dev 来启动开发服务器,访问提示的域名+端口号,在浏览器访问打包后的项目网页,修改代码后试试热更新效果
在 js / css 文件中修改代码保存后,会实时反馈到浏览器

二.webpack打包模式

1.打包模式:告知 Webpack 使用相应模式的内置优化

2.分类:

模式名称模式名字特点场景
开发模式development调试代码,实时加载,模块热替换等本地开发
生产模式production压缩代码,资源优化,更轻量等打包上线

3.如何设置影响 Webpack呢?
方式1:在 webpack.config.js 配置文件设置 mode 选项

// ...
module.exports = {
// ...mode: 'production'
}

方式2:在 package.json 命令行设置 mode 参数

"scripts": {"build": "webpack --mode=production","dev": "webpack serve --mode=development"
},

注意:命令行设置的优先级高于配置文件中的,推荐用命令行设置

三.webpack打包模式应用

1.需求:比如在开发模式下用 style-loader 内嵌更快,在生产模式下提取 css 代码
2. 方案1:webpack.config.js 配置导出函数,但是局限性大(只接受 2 种模式)
方案2:借助 cross-env (跨平台通用)包命令,设置参数区分环境
方案3:配置不同的 webpack.config.js (适用多种模式差异性较大情况)
3.主要使用方案 2 尝试,其他方案可以结合点击跳转的官方文档查看尝试
4.步骤:
下载 cross-env 软件包到当前项目

npm i cross-env --save-dev

2.配置自定义命令,传入参数名和值(会绑定到 process.env 对象下)
在这里插入图片描述
3.在 webpack.config.js 区分不同环境使用不同配置

module: 

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

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

相关文章

健身房预约管理系统(源码+文档)

健身房预约管理系统(小程序、ios、安卓都可部署) 文件包含内容程序简要说明含有功能:项目截图客户端首页我的预约登录教练预约时间我的注册页个人资料课程预约课程预约 管理端订单管理团课管理教练管理分类管理用户管理 文件包含内容 1、搭建…

Vue3性能优化之自定义指令实现图片懒加载

图片懒加载是一种常见性能优化的方式,进入网址时不全部加载图片 当用户进入图片可视区域时加载 不仅大大减少了服务器的压力 也可以时首屏时间变短 图片懒加载的实现原理:在图片没进入可视区域的时候,只需要让 img 标签的 src 属性指向一张…

【5G 接口协议】CU与DU之间的F1协议介绍

博主未授权任何人或组织机构转载博主任何原创文章,感谢各位对原创的支持! 博主链接 本人就职于国际知名终端厂商,负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作,目前牵头6G算力网络技术标准研究。 博客…

从词表到RLHF一镜到底训练一个大模型

第6章 如何训练大语言模型 本章节主要探讨训练大语言模型的步骤和方法论。 目前,可能大家接触的最多的模型训练方式是微调,也能收到一定程度的比较好的效果,其中有代表性的项目有Github上的Alpaca, Baize,Vicuna等。 6.1 Pretrain 预训练 有了微调,为什么还需要预训练,直…

第116讲:使用Mycat-eye管理Mycat数据库服务

文章目录 1.Mycat的管理工具2.Mycat-eye介绍3.部署Mycat-eye3.1.安装Zookeep3.2.安装Mycat-eye3.3.访问Mycat-eye 4.在Mycat-eye中导入Mycat服务的信息 1.Mycat的管理工具 Mycat默认开通2个端口,可以在server.xml中进行修改。 8066 数据访问端口,即进行…

管易云和金蝶云星空单据接口对接

管易云和金蝶云星空单据接口对接 接入系统:金蝶云星空 金蝶K/3Cloud结合当今先进管理理论和数十万家国内客户最佳应用实践,面向事业部制、多地点、多工厂等运营协同与管控型企业及集团公司,提供一个通用的ERP服务平台。K/3Cloud支持的协同应用…

8.4 循环神经网络

小结 对隐状态使用循环计算的神经网络称为循环神经网络(RNN)。 循环神经网络的隐状态可以捕获直到当前时间步序列的历史信息。 循环神经网络模型的参数数量不会随着时间步的增加而增加。 我们可以使用循环神经网络创建字符级语言模型。 我们可以使用…

条形图、柱状图的绘制方法

【题目描述】 用*号输出柱状图。第一行输入一个整数n表示数据个数,第二行输入n个整数,用空格隔开。n和输入的数都不超过20。 【样例输入】 7 5 1 1 8 1 1 5 【样例输出】 1.条形图(水平柱状图) 样例中的柱状图属…

Generative AI 新世界 | 扩散模型原理的代码实践之采样篇

前言 本期文章,我们一起来探究生成式 AI 这一火热的新知识领域。 目前计划有三个大方向: 代码深度实践方向。例如用代码完整诠释 Diffusion 模型的工作原理,或者 Transformer 的完整架构等; 模型部署和训练优化方向。例如尝试解…

关于Ansible的模块②

转载说明:如果您喜欢这篇文章并打算转载它,请私信作者取得授权。感谢您喜爱本文,请文明转载,谢谢。 接《关于Ansible的模块 ①-CSDN博客》,继续学习和梳理Ansible的常用文件类模块 1. copy模块 从当前机器上复制文件到…

从vrrp、bfd、keepalived到openflow多控制器--理论篇

vrrp 在一个网络中,通常会使用vrrp技术来实现网关的高可用。 vrrp,即Virtual Router Redundancy Protocol,虚拟路由冗余协议。 应用场景 典型的如下面这个例子: 当Router故障后,将会导致HostA-C都无法连接外部的I…

自动驾驶杂谈

在2024年的今天,自动驾驶技术已经迈向了一个崭新的阶段,日趋成熟与先进。昨日,我有幸亲眼目睹了自动驾驶车辆在道路上自如行驶的场景。然而,在市区拥堵的路段中,自动驾驶车辆显得有些力不从心,它们时而疾驰…

Spring Boot集成JPA快速入门demo

1.JPA介绍 JPA (Java Persistence API) 是 Sun 官方提出的 Java 持久化规范。它为 Java 开发人员提供了一种对象/关联映射工具来管理 Java 应用中的关系数据。他的出现主要是为了简化现有的持久化开发工作和整合 ORM 技术,结束现在 Hibernate,TopLink&am…

C#调用FreeSpire.Office读取word数据的基本用法

FreeSpire.Office是Spire.Office的免费版本,后者支持全面、复杂的office文件操作功能,包括文件格式转换、文档操作、文档打印等,详细介绍见下图及参考文献1。本文学习FreeSpire.Office的基本用法并用其获取word文档的基本信息。   新建Win…

VTK中polydata的属性数据结构表示和用法

vtk中通过vtkDataArray进行数据的存储,通过vtkDataObject进行可视化数据的表达,在vtkDataObject内部有一个vtkFieldData的实例,负责对数据的表达: ​​​​​​​ vtkFieldData存储数据的属性数据,该数据是对拓…

《福建教育》期刊简介及投稿要求

《福建教育》期刊简介及投稿要求 《福建教育》国内外公开发行的学术期刊,目前出版文献量达19187篇;总下载次数: 1361672次;总被引次数: 8709次 《福建教育》是福建省教育厅主管的唯一一份主流教育专业期刊&#xff0…

【嵌入式智能产品开发实战】(十二)—— 政安晨:通过ARM-Linux掌握基本技能【C语言程序的安装运行】

目录 程序的安装 程序安装的本质 在Linux下制作软件安装包 政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: 嵌入式智能产品开发实战 希望政安晨的博客能够对您有所裨益,如有不足之处,欢迎在评论区提出指正&#xf…

MybatisPlus速成

MybatisPlus快速入门 快速入门入门案例常见注解常见配置 核心功能条件构造器自定义SQLService接口 扩展功能代码生成静态工具逻辑删除枚举处理器JSON处理器 插件功能分页插件通用分页实体 参考文档 mybatis-plus参考文档 全部资料链接 讲义 快速入门 入门案例 <dependency…

骑行不将就,坐垫要讲究!跟维乐来一场骑美合一的美学旅行~

想象一下&#xff0c;你胯下的坐垫不再是冷冰冰的硬疙瘩&#xff0c;而是化身为“骑行界的舒适艺术家”。美学坐垫宛如马鞍上的微型沙发&#xff0c;采用美学与人体工学的跨界联姻&#xff0c;不仅赏心悦目&#xff0c;更能温柔拥抱你的臀部。它那精妙的曲线设计&#xff0c;仿…

AI大模型在金融行业的应用场景和落地路径

作者&#xff1a;林建明 来源&#xff1a;IT阅读排行榜 本文摘编自《AIGC重塑金融&#xff1a;AI大模型驱动的金融变革与实践》&#xff0c;机械工业出版社出版这是最好的时代&#xff0c;也是最坏的时代。尽管大模型技术在金融领域具有巨大的应用潜力&#xff0c;但其应用也面…