【webpack】应用篇

基础应用

      • 代码分离
        • 常用的代码分离方法
          • 方法一：配置入口节点
          • 方法二：防止重复
          • 方法三：动态导入
      • 缓存
          • 原因
          • 解决思路
      • 缓存第三方库
          • 原因
          • 解决思路
      • 将所有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里面//所以为了挪在外层要变成../distpath: 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.mzph.cn/news/205870.shtml

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

相关文章

【Python】np.save()和np.load()函数详解和示例

【Python】np.save()和np.load()函数详解和示例

本文通过函数原理和运行示例，对np.save()和np.load()函数进行详解，以帮助大家理解和使用。 更多Numpy函数详解和示例，可参考 【Python】Numpy库近50个常用函数详解和示例，可作为工具手册使用 目录 np.save （&#xff…
阅读更多...
云架构的思考3--云上开发

云架构的思考3--云上开发

目录 1 DevOps--简单灵活性高2 服务化（微服务）--弹性（可扩展）、按需自主服务3 无状态（Serverless）--弹性（可扩展）4 日志--安全5 配置中心--安全6 设计模式6.1 使用“适配器模式”调用…
阅读更多...
Go--协程

Go--协程

协程 协程是Go语言最大的特色之一。 1、协程的概念 协程并不是Go发明的概念，支持协程的变成语言有很多。Go在语言层面直接提供对协程的支持称为goroutine。 1.1 基本概念 进程 进程是应用程序启动的实例，每个进程都有独立的内存空间，不同…
阅读更多...
nodejs微信小程序＋python＋PHP的智能停车系统-计算机毕业设计推荐django

nodejs微信小程序＋python＋PHP的智能停车系统-计算机毕业设计推荐django

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性：…
阅读更多...
Glide系列-活动缓存和内存缓存

Glide系列-活动缓存和内存缓存

1.活动缓存数据结构用的HashMap final class ActiveResources {VisibleForTesting final Map<Key, ResourceWeakReference> activeEngineResources new HashMap<>(); } 2.内存缓存LinkedHashMap public class LruCache<T, Y> {private final…
阅读更多...
解决思维题的一些自我总结

解决思维题的一些自我总结

目录 常见思维题类型 排序 区间问题 01串串 字符串串 位运算 gcd 与 lcm 质数相关 二元组 常见思维题类型 思维题很多都可以说是贪心、但贪心种类很多&#xff0c;具体怎么贪&#xff0c;重要的还是在于积累经验吧...有些东西也很难总结&#xff0c;以下算是我的碎碎念…
阅读更多...
Next.js 中的中间件

Next.js 中的中间件

Next.js 中的中间件 Next.js 中的中间件是一个功能强大的工具&#xff0c;允许开发人员拦截、修改和控制应用程序中的请求和响应流。无论我们是构建服务器渲染的网站还是成熟的 Web 应用程序&#xff0c;了解如何有效使用中间件都可以显着增强项目进出的数据流。本文将从基础知…
阅读更多...
Thymeleaf生成pdf表格合并单元格描边不显示

Thymeleaf生成pdf表格合并单元格描边不显示

生成pdf后左侧第一列的右描边不显示&#xff0c;但是html显示正常 显示异常时描边的写法 cellpadding“0” cellspacing“0” &#xff0c;td,th描边 .self-table{border:1px solid #000;border-collapse: collapse;width:100%}.self-table th{font-size:12px;border:1px sol…
阅读更多...
el-select的多选multible带全选组件二次封装(vue2,elementUI)

el-select的多选multible带全选组件二次封装(vue2,elementUI)

1.需求 Select 选择器 多选需要增加 全选 和 取消全选 功能&#xff0c;前端框架为vue2&#xff0c;UI组件为elementUI。 2. 代码 html部分 <template><el-tooltip effect"dark" :disabled"defaultValue.length < 0" :content"defaul…
阅读更多...
GO设计模式——7、适配器模式（结构型）

GO设计模式——7、适配器模式（结构型）

目录 适配器模式&#xff08;Adapter Pattern&#xff09; 优缺点 使用场景 注意事项 代码实现 适配器模式&#xff08;Adapter Pattern&#xff09; 适配器模式&#xff08;Adapter Pattern&#xff09;是作为两个不兼容的接口之间的桥梁。将一个类的接口转化为客户希望的…
阅读更多...
dockerfile简单实践部署（jenkins，wordpress）

dockerfile简单实践部署（jenkins，wordpress）

实现部署jenkins的流程 配置java环境&#xff0c;导入jenkins包&#xff0c;运行命令 java -jar jenkins包&#xff0c;这里为了减少进入jenkins的web端安装插件&#xff0c;将插件提前部署到容器内。 制作dockerfile 创建镜像所在的文件夹和Dockerfile文件 mkdir /test cd …
阅读更多...
如何优雅使用 vue-html2pdf 插件生成pdf报表

如何优雅使用 vue-html2pdf 插件生成pdf报表

使用 vue-html2pdf 插件 业务背景&#xff0c;老板想要一份能征服客户的pdf报表&#xff0c;传统的pdf要手撕&#xff0c;企业中确实有点耗费时间&#xff0c;于是github上面看到开源的这个插件就…废话不多说&#xff0c;直接上教程 1.使用下面命令安装 vue-html2pdf npm i…
阅读更多...
Vue3项目调用腾讯地图服务(地址解析 地址转坐标)及使用axios的跨域问题

Vue3项目调用腾讯地图服务(地址解析 地址转坐标)及使用axios的跨域问题

一,需求 根据传入的文本地址 将其转换为坐标 显示地图点位在腾讯地图上 二,使用axios发送请求 import axios from axios; //引入axiosaxios({url:https://apis.map.qq.com/ws/geocoder/v1,method:get//参数 地址和key值}).then((data)>{console.log(data)});但是使用完报跨…
阅读更多...
第二十一章总结博客

第二十一章总结博客

网络程序设计基础 局域网与互联网 为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机。如下图所示 网络协议 1.IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。Internet 网络采用的协议是TCP/IP协议&#xff0c;其全称是Transmission …
阅读更多...
阿里云 ACR 制品中心 AI/大数据镜像专场上新推荐榜

阿里云 ACR 制品中心 AI/大数据镜像专场上新推荐榜

今天&#xff0c;AI 领域的快速发展不仅需要算法的突破&#xff0c;也需要工程的创新。随着容器技术和服务在企业的应用程度不断加深&#xff0c;企业对于容器的使用也越来越多地从在线业务逐渐向 AI、大数据类型的工作负载发展。同时&#xff0c;开发人员在考虑如何通过云原生…
阅读更多...
MQTT源码分析

MQTT源码分析

目录 MQTT源码分析 1. MQTT客户端功能 2. 客户端软件如何实现 3. 程序分层 4. 情景分析 4.1 连接服务器 4.2 创建线程 4.3 发布消息 4.4 最复杂&#xff1a;订阅消息 MQTT源码分析 分析源码&#xff1a;mqttclient\test\emqx\test.c 参考资料&#xff1a; kawaii-mqt…
阅读更多...
IntelliJ IDEA 2023.3 最新变化

IntelliJ IDEA 2023.3 最新变化

关键亮点 AI Assistant 预览阶段结束 全面推出 Ultimate JetBrains AI Assistant 现已全面推出&#xff0c;搭载大量新功能和改进&#xff0c;助力提高您在 JetBrains IDE 中的工作效率。 最新更新包括编辑器中增强的直接代码生成、无需复制代码即可回答项目相关查询的上下文…
阅读更多...
Linux篇：进程间通信

Linux篇：进程间通信

一、进程间通信原理&#xff1a; 1、通信是有成本的&#xff1a;两个或者多个进程&#xff0c;实现数据层面的交互&#xff0c;因为进程独立性的存在&#xff0c;导致进程通信的成本比较高。 2、进程间通信的方式&#xff1a; ①基本数据 ②发送命令 ③某种协同 ④通知 .....…
阅读更多...
Hibernate更新多实体对象的坑

Hibernate更新多实体对象的坑

目录 Hibernate中的脏检查机制 多线程环境下的问题 解决方案 1. 使用乐观锁 2. 使用悲观锁 3. 使用同步机制 总结与建议 在Hibernate中&#xff0c;当一个大对象&#xff08;通常是一个实体对象&#xff09;包含了几个小对象&#xff08;通常是关联的实体对象&#xff0…
阅读更多...
【Python】np.maximum()和np.minimum()函数详解和示例

【Python】np.maximum()和np.minimum()函数详解和示例

本文通过函数原理和运行示例&#xff0c;对np.maximum()和np.minimum()函数进行详解&#xff0c;以帮助大家理解和使用。 更多Numpy函数详解和示例&#xff0c;可参考 【Python】Numpy库近50个常用函数详解和示例&#xff0c;可作为工具手册使用 目录 np.maximum()函数解析运…
阅读更多...
最新文章

Copyright @ 2022~2023