Webpack学习笔记(5)

news2024/12/22 11:08:29

1.拆分开发环境和生产环境配置

很多配置在开发环境和生产环境存在不一致的情况,比如开发环境没有必要设置缓存,生产环境需要设置公共路径等等。

2.公共路径

使用publicPath配置项,可以通过它指定应用程序中所有资源的基础路径

webpack.config.js中output增加publicPath:

打开app.html发现每个路径前多了一个域名,这个域名可以指定为前端域名或cdn服务器域名都可以:

3.环境变量

环境变量可以帮我们消除webpack.config.js配置文件中的开发环境和生产环境的差异。

调整webpack.config.js为函数形式,并且将mode修改为通过env进行传参;

当需要使用生产环境时:npx webpack --env production

使用terser-webpack-plugin 对script文件进行压缩;

安装:npm install terser-webpack-plugin -D

配置一下:

执行npx webpack --env production后代码会被打包压缩生成LICIENCE文件;

执行npx webpack --env development后没有被压缩;

4.拆分配置文件

如果都用判断的方法来区分生产和开发环境,很麻烦,所以将配置文件拆分为两个,专门应对两个环境。

创建一个config文件夹,分别存放两个js文件对应两个环境:

在开发环境将mode设置为‘development’,去除不需要的一些插件例如压缩、公共域名等;

在生产环境将mode设置为‘production’,去除不需要的一些插件例如dev-server等;

运行时指定配置文件 npx webpack -c ./config/webpack.config.prod.js或 npx webpack -c ./config/webpack.config.dev.js即可。

5.npm脚本

每次打包或者启动服务时,要在命令行输入很长的命令,如何优化

在package.json中配置script:

这样就可以直接执行npm run start和npm run build.

如果想要隐藏一些性能提示信息,可以在performance中配置:

6.提取公共配置

生产环境和开发环境分开配置后发现,会有大量重复的代码,可否抽离到一个配置文件,作为公共配置?

创建一个config文件夹下分别放三个js文件:公共、开发、生产

在webpack.config.common.js中存放二者共有的代码;其余两个环境js文件保留自己特有的代码。

简化后的webpack-config-dev.js:

简化后的webpack-config-prod.js:

然后在config文件夹下的webpack.config.js中合并环境配置,使用webpack-merge

通过env携带参数指定环境配置,所以package.json脚本中也要修改:

tips:

开发环境

  • 目标是快速开发和调试,配置注重灵活性和调试能力。
  • 使用未优化的代码和资源,支持本地开发工具和代理。

构建工具配置

  • 使用 webpack-dev-server 或类似工具,提供实时重新加载和热更新。
  • 使用 Source Maps 来帮助调试(如 devtool: 'eval-source-map')。
  • 不进行代码压缩和优化,保留原始代码结构以便调试。

静态资源处理

  • 直接提供未优化的静态资源(如图片、字体),不进行压缩或其他处理。
  • 使用 publicPath: '/' 或自定义路径来提供静态文件。

API 请求

  • 使用代理(如 webpack-dev-server 的 proxy 配置)将请求转发到本地或远程开发服务器。
  • 可能使用 Mock API 来模拟数据。

日志与调试

  • 启用详细的日志输出(如 console.log 和调试信息)。
  • 使用开发工具(如 Chrome DevTools)来调试代码。

依赖管理

  • 安装所有依赖(包括开发依赖和生产依赖)。
  • 可能使用未发布的库或本地构建的工具。

生产环境

  • 目标是高性能、稳定性和安全性,配置注重优化和保护。
  • 使用压缩、混淆、缓存和 CDN 等技术提升用户体验。

构建工具配置

  • 使用 Webpack 或其他构建工具进行代码压缩(如 TerserPlugin)、混淆和优化。
  • 禁用 Source Maps(或生成生产环境专用的 Minified Source Maps)。
  • 使用 Tree Shaking 和 Code Splitting 来减少代码体积和加载时间。
  • 对静态资源进行优化(如图片压缩、字体转 WebP)并上传到 CDN。

静态资源处理

  • 使用缓存控制(如 Cache-Control 头部)来提升资源加载速度。
  • 配置 publicPath: '/static/' 或 CDN 路径。

API 请求

  • 直接请求真实的 API 服务器,可能需要配置 HTTPS 和 CORS。
  • 优化 API 请求(如使用 GraphQL 或合并请求)以减少延迟。

日志与调试

  • 移除或禁用所有调试代码(如删除 console.log)。
  • 使用错误日志记录工具(如 Sentry、ELK)来监控和分析生产环境的问题。

依赖管理

  • 只安装生产依赖(如 npm install --production)。
  • 使用经过测试和稳定的依赖库。

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

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

相关文章

桌面图形界面生成原理:从流水灯到电脑屏幕

桌面图形界面是我们在使用电脑时接触最多的一个部分。它的美观、简洁、易用都给我们的生活带来了极大的便利。但是,你是否想过,这样的界面是如何生成的呢?让我们从流水灯的原理开始,一步步揭开桌面图形界面生成的奥秘。 一、流水…

html+css网页设计 美食 百味美食4个页面

htmlcss网页设计 美食 百味美食4个页面 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1&#xf…

WPF DataTemplate 数据模板

DataTemplate 顾名思义&#xff0c;数据模板&#xff0c;在 wpf 中使用非常频繁。 它一般用在带有 DataTemplate 依赖属性的控件中&#xff0c;如 ContentControl、集合控件 ListBox、ItemsControl 、TabControls 等。 1. 非集合控件中使用 <UserControl.Resources>&l…

【CSS in Depth 2 精译_084】第 14 章:CSS 蒙版、形状与剪切概述 + 14.1:CSS 滤镜

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 14 章 蒙版、形状与剪切】 ✔️ 14.1 滤镜 ✔️ 14.1.1 滤镜的类型 ✔️14.1.2 背景滤镜 ✔️ 14.2 蒙版 文章目录 第 14 章 蒙版、形状与剪切 Masks, shapes, and…

excel 使用vlook up找出两列中不同的内容

当使用 VLOOKUP 函数时&#xff0c;您可以将其用于比较两列的内容。假设您要比较 A 列和 B 列的内容&#xff0c;并将结果显示在 C 列&#xff0c;您可以在 C1 单元格中输入以下公式&#xff1a; 这个公式将在 B 列中的每个单元格中查找是否存在于 A 列中。如果在 A 列中找不到…

java_章节作业

第1题 package com.hspedu.homework;/*** author:寰愬悏瓒&#xfffd;* date:2024/12/19 version:1.0*/ public class Homework01 {public static void main(String[] args) {//初始化Person对象数组&#xff0c;有3个Person对象&#xff1b;Person[] persons new Person[3];…

20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕

20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕 2024/12/17 17:21 缘起&#xff0c;最近需要识别法国电影《地下铁》的法语字幕&#xff0c;使用 字幕小工具V1.2【whisper套壳/GUI封装了】 无效。 那就是直接使用最原始的whisper来干了。 当你重装WIN10的时候&#…

Fiddler勾选https后google浏览器网页访问不可用

一、说明 最近电脑重新安装系统后&#xff0c;之前的所有工具都需要重新安装和配置&#xff0c;有个项目需要抓包https包查看一下请求的内容&#xff0c;通过Fiddler工具&#xff0c;但是开启后&#xff0c;发现https的无法抓取&#xff0c;同时google浏览器也不无法访问互联网…

OpenAI 12天发布会(12 Days of OpenAI)总结

在OpenAI的“12 Days of OpenAI”活动中&#xff0c;每一天都会发布新的功能或技术&#xff0c;展示公司在AI领域的最新进展。首先展示下全部功能发布完成后&#xff0c;现在ChatGPT的界面&#xff1a; 以下是每一天的简要概述及其意义&#xff1a; 第1天 - 完整版O1模型 今天…

LLaMA-Factory 单卡3080*2 deepspeed zero3 微调Qwen2.5-7B-Instruct

环境安装 git clone https://gitcode.com/gh_mirrors/ll/LLaMA-Factory.git 下载模型 pip install modelscope modelscope download --model Qwen/Qwen2.5-7B-Instruct --local_dir /root/autodl-tmp/models/Qwen/Qwen2.5-7B-Instruct 微调 llamafactory-cli train \--st…

Vue3组件封装技巧与心得

摘要&#xff1a; 日常开发中&#xff0c;用Vue组件进行业务拆分&#xff0c;代码解耦是一个很好的选择&#xff1b; 今天就来分享一下我在使用Vue3进行组件封装的一些技巧和心得&#xff0c;希望能够帮助到大家&#xff1b; 1. 组件特性&#xff1a; 在Vue中组件是一个独立的…

图漾相机-ROS1_SDK_ubuntu版本编译(新版本)

文章目录 官网编译文档链接官网SDK下载链接1、下载 Camport ROS1 SDK1.下载git2、下载链接 2、准备编译工作1、安装 catkin2、配置环境变量3. 将Camport3中的linux库文件拷贝到 user/lib目录下4、修改lunch文件制定相机&#xff08;可以放在最后可以参考在线文档&#xff09;**…

十二、从0开始卷出一个新项目之瑞萨RZN2L 基于IAR coremark fsp200工程构建和iar icf链接文件修改方法

目录 一、概述 二、rzn2l_fsp2.0.0_coremark工程构建 2.1 目录结构 2.2 项目一览 2.3 iar工程打开报错如何处理 三、代码优化的问题 3.1 system.c中复制内存 3.2 iar代码优化等级与volatile关键字 3.3 iar配置优化单个文件与预编译宏的范围 四、iar .icf链接文件修改…

内容与资讯API优质清单

作为开发者&#xff0c;拥有一套API合集是必不可少的。这个开发者必备的API合集汇集了各种实用的API资源&#xff0c;为你的开发工作提供了强大的支持&#xff01;无论你是在构建网站、开发应用还是进行数据分析&#xff0c;这个合集都能满足你的需求。你可以通过这些免费API获…

线程知识总结(二)

本篇文章以线程同步的相关内容为主。线程的同步机制主要用来解决线程安全问题&#xff0c;主要方式有同步代码块、同步方法等。首先来了解何为线程安全问题。 1、线程安全问题 卖票示例&#xff0c;4 个窗口卖 100 张票&#xff1a; class Ticket implements Runnable {priv…

多智能体/多机器人网络中的图论法

一、引言 1、网络科学至今受到广泛关注的原因&#xff1a; &#xff08;1&#xff09;大量的学科&#xff08;尤其生物及材料科学&#xff09;需要对元素间相互作用在多层级系统中所扮演的角色有更深层次的理解&#xff1b; &#xff08;2&#xff09;科技的发展促进了综合网…

OB删除1.5亿数据耗费2小时

目录 回顾&#xff1a;mysql是怎么删除数据的&#xff1f; 删除方案 代码实现 执行结果 结论 本篇是实际操作 批量处理数据以及线程池线程数设置 记录学习 背景&#xff1a;有一张用户标签表&#xff0c;存储数据量达4个亿&#xff0c;使用OceanBase存储&#xff0c;由于…

简洁IIC协议讲述

目录 一&#xff1a;首先&#xff0c;IIC传输是在2条线上传输的。 二&#xff1a;时钟信号的频率和占空比解释&#xff08;可以看作PWM波形&#xff09; 三&#xff1a;传输信号的流程图&#xff08;起始和终止信号都是由主机(我)控制&#xff09; 四&#xff1a;开始信号和…

IIC I2C子协议 SMBus协议 通信协议原理 时序 SMBus深度剖析

引言&#xff1a;系统管理总线&#xff08;SMBus&#xff09;是一种双线接口&#xff0c;通过该接口&#xff0c;各种系统组件芯片和设备可以相互以及与系统其他部分通信。它基于IC总线的操作原理。附录B提供了一些SMBus特性与IC总线不同的方式的描述。 SMBus为系统和电源管理相…

重拾设计模式--建造者模式

文章目录 建造者模式&#xff08;Builder Pattern&#xff09;概述建造者模式UML图作用&#xff1a;建造者模式的结构产品&#xff08;Product&#xff09;&#xff1a;抽象建造者&#xff08;Builder&#xff09;&#xff1a;具体建造者&#xff08;Concrete Builder&#xff…