【webpack】应用篇

news2024/10/2 22:15:47

基础应用

      • 代码分离
        • 常用的代码分离方法
          • 方法一：配置入口节点
          • 方法二：防止重复
          • 方法三：动态导入
      • 缓存
          • 原因
          • 解决思路
      • 缓存第三方库
          • 原因
          • 解决思路
      • 将所有js文件单独存放文件夹
      • 拆分开发环境和生产环境配置
        • 公共路径
        • 环境变量和区分环境代码压缩
      • 拆分配置文件
          • 开发环境下，webpack.config.dev.js文件内容
          • 生产环境下，webpack.config.build.js文件内容
      • npm 脚本
          • 关闭性能提示
      • 提取公共配置
      • 合并配置文件
          • 通过 --env来传递环境变量

代码分离

  • 代码分离用于获取更小的打包文件
  • 还可以控制资源加载的优先级
常用的代码分离方法
方法一：配置入口节点
  • 使用entry配置手动地分离代码
  • 问题：如果有多个入口，那么这些多个入口共享的文件会分别在每个包里重复打包
  • 产生如下报错，提示一个出口对应多个入口
    在这里插入图片描述
  • 解决方法，出口写活
  • 这个[name]会自动对应入口文件名
    在这里插入图片描述
  • 展示缺点
  • 类似这个lodash如果在多个入口文件都有引入，到时候打包的时候的出口文件就会多次重复打包这个插件
  • 这样就会造成打完的包体积变大！
    在这里插入图片描述
方法二：防止重复
  • 使用entry dependencies或者通过splitChunksPlugin去重和分离代码
  • entry dependencies，将共用的抽离出来单独打包
    在这里插入图片描述
  • splitChunksPlugin ，实现代码分割，将公共的代码抽离到一个单独的文件
optimization: {
    splitChunks: {
      chunks:'all'
    }
  },

在这里插入图片描述

方法三：动态导入
  • 通过模块的内联函数调用来分离代码
  • 懒加载，也叫按需加载，在使用的时候加载模块
    在这里插入图片描述
  • 预获取/预加载模块
  • 打出的包看不出区别，但游览器上有区别
  • 这个预获取prefetch是指在首页加载完毕后，网络有空闲的时候，加载我们的math.bundle
    在这里插入图片描述
  • 预加载，效果和懒加载效果差不多，在使用的时候再加载
    在这里插入图片描述

缓存

原因
  • 1，webpack打包我们的模块化应用程序，会生成一个可以部署的dist目录
  • 2，然后webpack把打包好的内容放置在这个dist目录中
  • 3，我们将这个目录放置在serve中，也就是服务器中
  • 4，这样游览器就能访问我们的资源了
  • 5，获取资源比较耗费时间，所以游览器会采取缓存技术
  • 6，通过命中缓存以降低网络流量，使网站加载速度更快
  • 7，但当部署资源的时候，不更改资源的文件名，游览器会认为没有更新，就会使用缓存版本
  • 8，所以，导致，新代码的获取有点困难！
解决思路
  • 1，确保webpack编译生成的文件能够被客户端缓存
  • 2，而在文件发生变化的时候，又能够请求的新的文件
    • 采取命名改变
      在这里插入图片描述

缓存第三方库

原因
  • 第三方库不会频繁修改
解决思路
  • 将第三方库单独vendor chunk文件中
  • 利用client长效缓存机制，命中缓存来消除请求，减少向服务器获取资源，并且还能保证代码一致
    在这里插入图片描述

将所有js文件单独存放文件夹

  • 目的，将打包好的文件打包在一个文件里
    在这里插入图片描述
    在这里插入图片描述

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

公共路径
  • publicPath配置选项
  • 通过它来指定应用程序中所有资源的基础路径
  • 代码位置
    在这里插入图片描述
  • 实现效果
    在这里插入图片描述
环境变量和区分环境代码压缩
  • 目的：想要消除web.config.js在开发环境和生产环境之间的差异
  • 用户可以设置： npx webpack --env production
  • 在这里插入图片描述
  • 按道理我们可以使用webpack开箱即用的terser那个插件，可以生效的，目前为什么没有生效
  • 原因：之前有写css压缩，配置了这个，terser配置就得单独配置一下
    在这里插入图片描述
  • 安装：npm install terser-webpack-plugin -D
    在这里插入图片描述
  • 因为这个在生产环境压缩，开发环境不执行压缩
  • 然后运行 npx webpack --env production
  • 注意哈：必须 --env production

拆分配置文件

  • 先新建两个文件区分不同环境
    在这里插入图片描述
开发环境下，webpack.config.dev.js文件内容
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  output: {
    filename: 'scripts/[name].js',
    //./dist,会使代码打包到config/dist里面
    //所以为了挪在外层要变成../dist
    path: path.resolve(__dirname, '../dist'),
    clean: true,
    assetModuleFilename: 'images/[name].[contenthash][ext]',
  },
  mode: 'development',
  devtool: 'inline-source-map',
  plugins: [
    // 创建一个插件的实例对象
    new HtmlWebpackPlugin({
      template: './index.html', // 模板
      filename: 'app.html', // 输出的文件名,
      inject: 'body', // 自定义标签的放置位置,默认在head
    }),
  ],
  //运行路径
  devServer: {
    static: '../dist', //需要热模块更新的文件
  },
};
  • 使用这个打包：npx webpack -c ./config/webpack.config.dev.js
  • 所以，就会在开发环境下，无域名，js代码无压缩
    在这里插入图片描述
生产环境下，webpack.config.build.js文件内容
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  // 多入口文件的地址
  entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },
  optimization: {
    //css压缩
    minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
    //查找第三方库并单独打包
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors', //打包的名字
          chunks: 'all',
        },
      },
    },
  },
  output: {
    filename: 'scripts/[name].[contenthash].js',
    path: path.resolve(__dirname, '../dist'),
    clean: true,
    assetModuleFilename: 'images/[name].[contenthash][ext]',
    publicPath: 'http:localhost:8080/',
  },
  mode: 'production',
  plugins: [
    // 创建一个插件的实例对象
    new HtmlWebpackPlugin({
      template: './index.html', // 模板
      filename: 'app.html', // 输出的文件名,
      inject: 'body', // 自定义标签的放置位置,默认在head
    }),
  ],
};
  • 所以，npx webpack -c ./config/webpack.config.build.js
  • 这个命令下，代码会压缩，会带域名
    在这里插入图片描述

npm 脚本

  • 每次打包或者启动服务，都需要在命令行里面输入一长串命令
  • 例如：上面的npx webpack -c./config/webpack.config.build.js这些，很麻烦！
  • 所以配置npm 脚本来简化命令行的输入
    在这里插入图片描述
  • npx 可以省略
    在这里插入图片描述
  • 然后运行npm run start打测试包或者npm run build打正式包即可
关闭性能提示
  • 有时候会有一些包超出的警告
    在这里插入图片描述
    在这里插入图片描述

提取公共配置

  • 我们发现开发环境和生产环境下的配置文件里有大量重复代码
  • 可以手动将重复的代码单独提前到一个文件里
  • 创建 webpack.config.common.js,存放共有的配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // 多入口文件的地址
  entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },
  optimization: {
    //查找第三方库并单独打包
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors', //打包的名字
          chunks: 'all',
        },
      },
    },
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    clean: true,
    assetModuleFilename: 'images/[name].[contenthash][ext]',
  },
  plugins: [
    // 创建一个插件的实例对象
    new HtmlWebpackPlugin({
      template: './index.html', // 模板
      filename: 'app.html', // 输出的文件名,
      inject: 'body', // 自定义标签的放置位置,默认在head
    }),
  ],
};
  • 删除其余配置文件中和公共配置相同的内容，只保留不同内容
    在这里插入图片描述
    在这里插入图片描述

合并配置文件

  • npm install webpack-merge

在这里插入图片描述

通过 --env来传递环境变量

在这里插入图片描述

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

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

相关文章

2023五岳杯量子计算挑战赛数学建模思路+代码+模型+论文

2023五岳杯量子计算挑战赛数学建模思路+代码+模型+论文

目录 计算力网络（CPN）是一种新型的信息基础设施，完整论文代码见文末 问题描述 2.1 问题1 2.2 问题2 2.3 问题3 问题1的解答过程： 问题3的解答过程： 决策优化应用场景：人工智能模型超参数调优 背景信…
阅读更多...
HarmonyOS系统架构及项目结构浅析

HarmonyOS系统架构及项目结构浅析

语雀知识库地址：语雀HarmonyOS知识库 飞书知识库地址：飞书HarmonyOS知识库 基本概念 UI框架 HarmonyOS提供了一套UI开发框架，即方舟开发框架（ArkUI框架）。方舟开发框架可为开发者提供应用UI开发所必需的能力&#xf…
阅读更多...
深度学习实战66-基于计算机视觉的自动驾驶技术，利用YOLOP模型实现车辆区域检测框、可行驶区域和车道线分割图

深度学习实战66-基于计算机视觉的自动驾驶技术，利用YOLOP模型实现车辆区域检测框、可行驶区域和车道线分割图

大家好，我是微学AI，今天给大家介绍一下深度学习实战66-基于计算机视觉的自动驾驶技术，利用YOLOP模型实现车辆区域检测框、可行驶区域和车道线分割图。本文我将介绍自动驾驶技术及其应用场景，并重点阐述了基于计算机视觉技术下的自动驾驶。自动驾驶技术是一种利用人工智能和…
阅读更多...
在jupyter notebook中修改其他文件的解决方案

在jupyter notebook中修改其他文件的解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
探索Vue小程序框架的底层原理

探索Vue小程序框架的底层原理

最近晚上有时间复盘之前研究小程序框架的相关内容，总结文章记录一下。 本篇文章主要介绍百度19年开源的Mars小程序开发框架，和Taro、mpvue、uniapp类似，都是编译型小程序框架，都是通过将 Vue 或 React 源码直接编译为小程序源码&a…
阅读更多...
基于FPGA的温度控制系统设计（论文+源码）

基于FPGA的温度控制系统设计（论文+源码）

1.系统设计 本次基于FPGA的智能温度控制系统，以FPGA为控制核心，采用自顶向下的设计方法，按照模块化设计的思路分别实现各个模块，再加以整合实现整个系统，从而达到了温度控制的目的。系统以水箱为被控对象，…
阅读更多...
深入探索C语言中的二叉树：数据结构之旅

深入探索C语言中的二叉树：数据结构之旅

引言 在计算机科学领域，数据结构是基础中的基础。在众多数据结构中，二叉树因其在各种操作中的高效性而脱颖而出。二叉树是一种特殊的树形结构，每个节点最多有两个子节点：左子节点和右子节点。这种结构使得搜索、插入、删除等操作…
阅读更多...
《机器学习实战》MNIST 数据集的导入方法

《机器学习实战》MNIST 数据集的导入方法

1、在网上下载数据集 mnister 数据集有两个类型， （1）一个是手写的阿拉伯数字图片：MNIST 下载地址： 链接：https://pan.baidu.com/s/1dd-I-laysPbT8wxbyvxTvg 提取码：1234 （2…
阅读更多...
深度解析 Kafka 消息保证机制

深度解析 Kafka 消息保证机制

Kafka作为分布式流处理平台的重要组成部分，其消息保证机制是保障数据可靠性、一致性和顺序性的核心。在本文中，将深入探讨Kafka的消息保证机制，并通过丰富的示例代码展示其在实际应用中的强大功能。 生产者端消息保证 1 At Most Once &quo…
阅读更多...
Android 13 Settings蓝牙列表卡顿问题排查及优化过程

Android 13 Settings蓝牙列表卡顿问题排查及优化过程

一.背景 此问题是蓝牙列表界面息屏后再点击亮屏蓝牙界面卡住，划不动也不能返回，在人多的时候(附近开启的蓝牙设备过多的时候)会卡住大概四五秒才能滑动. 优化前效果见资源： 二.查找耗时点 根据Android Studio的Profiler工具进行排查，查找主线程时间线比较长的方法，如下：…
阅读更多...
记录 | centos源码编译bazel

记录 | centos源码编译bazel

tensorflow的源码编译依赖于 bazel 这里进行 bazel 的源码编译 1、安装依赖 sudo yum install -y java-11-openjdk sudo yum install -y java-11-openjdk-devel sudo yum install -y protobuf-compiler zip unzip2、知悉要安装的 bazel 的版本 务必安装受支持的 Bazel 版本…
阅读更多...
展望2024年供应链安全

展望2024年供应链安全

2023年是开展供应链安全，尤其是开源治理如火如荼的一年，开源治理是供应链安全最重要的一个方面，所以我们从开源治理谈起。我们先回顾一下2023的开源治理情况。我们从信通院《2023年中国企业开源治理全景观察》发布的信息。信通院调研了来自七…
阅读更多...
linux安装mysql5.7(一遍过)

linux安装mysql5.7(一遍过)

之前安装的时候遇到了很多问题，浪费了一些时间。整理出这份教程，照着做基本一遍过。 这是安装包: 链接：https://pan.baidu.com/s/1gBuQBjA4R5qRYZKPKN3uXw?pwd1nuz 1.下载安装包，上传到linux。我这里就放到downloads目录下面…
阅读更多...
软著项目推荐 疫情数据分析与3D可视化 - python 大数据

软著项目推荐 疫情数据分析与3D可视化 - python 大数据

文章目录 0 前言1 课题背景2 实现效果3 设计原理4 部分代码5 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 大数据全国疫情数据分析与3D可视化 该项目较为新颖，适合作为竞赛课题方向，学长非常推荐&#xff0…
阅读更多...
Google Bard vs. ChatGPT 4.0：文献检索、文献推荐功能对比

Google Bard vs. ChatGPT 4.0：文献检索、文献推荐功能对比

在这篇博客中，我们将探讨和比较四个不同的人工智能模型——ChatGPT 3.5、ChatGPT 4.0、ChatGPT 4.0插件和Google Bard。我们将通过三个问题的测试结果来评估它们在处理特定任务时的效能和响应速度。 导航 问题 1: 统计自Vehicle Routing Problem (VRP)第一篇文章发…
阅读更多...
【Flink系列二】如何计算Job并行度及slots数量

【Flink系列二】如何计算Job并行度及slots数量

接上文的问题 并行的任务，需要占用多少slot ？一个流处理程序，需要包含多少个任务 首先明确一下概念 slot：TM上分配资源的最小单元，它代表的是资源（比如1G内存，而非线程的概念，好多…
阅读更多...
设备制造行业CRM：提升客户满意度，驱动业务增长

设备制造行业CRM：提升客户满意度，驱动业务增长

设备制造行业客户需求多样化、服务链路长，企业在关注APS、EMS等工业软件之余还要以客户为中心，做好客户服务。设备制造行业CRM管理系统是企业管理客户关系的利器，设备制造行业CRM的作用有哪些？一文带您看懂。 设备制造行业需要解…
阅读更多...
【深度学习】强化学习（一）强化学习定义

【深度学习】强化学习（一）强化学习定义

文章目录 一、强化学习问题1、交互的对象1. 智能体（Agent）2. 环境（Environment） 2、强化学习的基本要素1. 状态 𝑠2. 动作 𝑎3. 策略 𝜋(𝑎|𝑠)4. 状态转移概率 &#x1…
阅读更多...
elk（filebeat）日志收集工具

elk（filebeat）日志收集工具

elk（filebeat）日志收集工具 elk：filebeat日志收集工具 和logstash相同 filebeat是一个轻量级的日志收集工具，所使用的系统资源比logstash部署和启动时使用的资源要小得多 filebeat可以运行在非Java环境。他可以代理logstash在…
阅读更多...
ArcGIS Pro中怎么设置标注换行

ArcGIS Pro中怎么设置标注换行

在ArcGIS Pro中进行文字标注的时候，如果标注的字段内容太长，直接标注的话会不美观，而且还会影响旁边的标注显示，这里为大家介绍一下在ArcGIS Pro中设置文字换行的方法，希望能对你有所帮助。 数据来源 本教程所使用的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023