Webpack学习笔记(5)

news/2024/12/22 10:29:04/

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.ppmy.cn/news/1557169.html

相关文章

Nginx负载均衡(upstream)

Nginx负载均衡(upstream) upstream 主要是配置均衡池和调度方法 proxy_pass 主要是配置代理服务器ip或服务器组的名字 upstream testTomcat{​​​​server 127.0.0.1:81 weight=1;​​​​server 127.0.0.1:82 weight=1;​​​​server 127.0.0.1:83 weight

ASPICE VS 敏捷开发

ASPICE(Automotive SPICE,汽车软件过程改进与能力评估)是一个用于汽车行业的软件过程改进和能力评估的框架。它提供了一套标准化的流程和评估模型,帮助汽车行业的组织提高软件开发的质量和效率。ASPICE 是基于ISO/IEC 15504&#…

【Elasticsearch03】企业级日志分析系统ELK之Elasticsearch访问与优化

Elasticsearch 访问 Shell 命令 查看 ES 集群状态 访问 ES #查看支持的指令 curl http://127.0.0.1:9200/_cat #查看es集群状态 集群存活少于半数,无法执行 curl http://127.0.0.1:9200/_cat/health url http://127.0.0.1:9200/_cat/health?v #查看集群分健康…

【Spring】获取Bean对象需要哪些注解

阿华代码,不是逆风,就是我疯 你们的点赞收藏是我前进最大的动力!! 希望本文内容能够帮助到你!! 目录 一:Service(服务存储) 1:存储bean的代码 2&#xff1…

校园点餐订餐外卖跑腿Java源码

简介: 一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合&am…

前端零基础学习Day-Eight

CSS字体和文本样式 CSS文字样式 字体:font-family 语法:font-family:[字体1][,字体2][,…] p{font-family:“微软雅黑”,“宋体”,“黑体”;} 含空格字体名和中文,用英文引号括起 属性值:具体字体名,字体集 字体集&…

网络安全概论——防火墙原理与设计

一、防火墙概述 防火墙是一种装置,它是由软件/硬件设备组合而成,通常处于企业的内部局域网与 Internet 之间,限制 Internet 用户对内部网络的访问以及管理内部用户访问 Internet 的权限。换言之,一个防火墙在一个被认为是安全和可…

怎么给git动图扣除背景?

环境: Wn10 专业版 python 问题描述: 怎么给git动图扣除背景? 解决方案: 要将一个 GIF 动图的尺寸改为 50x50 并且把黑色背景改成透明,您可以使用 Python 的 Pillow 库。Pillow 支持处理静态图像和动画 GIF。下面…