webpack相关

最新推荐文章于 2024-05-20 15:09:25 发布
最新推荐文章于 2024-05-20 15:09:25 发布
阅读量83 收藏
点赞数
原文链接：https://www.jianshu.com/p/e80d38661358
版权
webpack3和webpack4的区别
  1. mode/–mode参数
    新增了mode/–mode参数来表示是开发还是生产（development/production）
    production 侧重于打包后的文件大小，development侧重于goujiansud
  2. 移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）
  3. 移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
  4. 支持es6的方式导入JSON文件，并且可以过滤无用的代码
  5. 升级happypack插件（happypack可以进行多线程加速打包）
  6. ExtractTextWebpackPlugin调整，建议选用新的CSS文件提取kiii插件mini-css-extract-plugin，production模式，增加 minimizer
loader 和 plugin 不同
  1. loader是使webpack拥有加载和解析非js文件的能力
  2. plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果
webpack构建流程
  1. 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
  2. 开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译
  3. 确定入口，通过entry找到入口文件
  4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
  5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
  6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
  7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中
    在以上过程中，webpack会在特定的时间点广播出特定的事件，插件在舰艇感兴趣的事件后会执行特定的逻辑，改变webpack的运行结果
如何利用webpack来优化前端性能
  1. 压缩代码。uglifyJsPlugin 压缩js代码， mini-css-extract-plugin 压缩css代码
  2. 利用CDN加速，将引用的静态资源修改为CDN上对应的路径，可以利用webpack对于output参数和loader的publicpath参数来修改资源路径
  3. 删除无用代码（tree shaking），css需要使用Purify-CSS
  4. 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
什么是bundle，什么是chunk，什么是module

bundle:有webpack打包出来的文件
chunk：webpack在进行模块的依赖分析的时候，代码分割出来的代码块
module:开发中的单个模块

happyPack开启多线程loader转换

运行在node.js之上的webpack时单线程模型，也就是只能一个一个文件进行处理，不能并行处理，happypack可以将任务分解给多个子进程，最后将结果发给主进程，js是单线程模型，只能通过这种多线程的方式提高性能

飞驰的地铁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack 相关知识梳理
m0_62877814的博客
01-05 2572
webpack相关知识
webpack相关图片压缩插件
06-20
由于这几个图片压缩的插件下载会经常失败，所以我整理了一下。 文件内容： ...配合我之前发布的webpack基本配置、react webpack配置和vue webpack配置使用。 详情请访问：https://blog.csdn.net/qq_45142260
webpack相关题
weixin_72127453的博客
07-04 1940
常见问题
webpack相关配置
热门推荐
官方推荐
01-04 4万+
文章目录???? webpack的概念???? webpack的基本使用项目目录并初始化创建首页及js文件以jQuery为例安装jQuery导入jQuery安装webpack???? webpack的相关设置设置webpack的打包入口/出口设置webpack的自动打包配置html-webpack-pluginwebpack中的加载器???? 使用webpack打包发布项目???? 在webpack中使用vueVue单文件组件在webpack中使用vue????写在最后 ???? webpack的概念 we
记录 webpack 相关问题
weixin_46410264的博客
04-26 178
—记录时间：2023-04-26。
Webpack相关概念
wuxian_wj的博客
02-12 672
什么是webpack 本质上，webpack是一个用于javascript应用程序的静态模块打包工具。当webpack处理应用程序时，他会在内部从一个或多个入口构建一个依赖关系，然后将项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示我们的内容。 配置项概念 使用webpack需要做好相应的配置，在使用之前我们需要先了解其相关的核心概念 入口（entry） 输出（output） loader 插件（plugin） 模式（mode） 浏览器兼容性（browser compati
webpack 相关
weixin_71479122的博客
05-20 584
Webpack的理解
webpack相关面试题（深度考察）
qq_38144981的博客
03-07 2719
面试过程中，考察前端的打包工具webpack，全部了解后，面试就会很顺利。
webpack 相关bug
Fray_Zyt的博客
10-09 109
若不用打包工具，浏览器则识别不了es6语言 在webpack中没有默认的src文件，需设置src文件或自定义入口文件 webpack版本问题，下载npmi-Dwebpack@4-g 即可解决
和webpack有关
hanmou77的博客
04-16 506
安装webpack遇到的一些问题MAC 第一步$ sudo -s 原因分析是：在mac下依赖包要写入系统重要文件夹里，由于没有先获取root权限所以写入失败，导致安装失败。mac 还有一步操作就是，终端先执行如下命令npm install --save-dev webpack -g 输入以上命令后: webpack -v 提示:The CLI moved into a separate packa...
前端面试题之webpack相关题集.zip
06-21
这个压缩包文件“前端面试题之webpack相关题集.zip”显然包含了针对 Webpack 的面试问题集合，旨在帮助开发者准备相关的面试。 Webpack 的核心概念主要包括： 1. **入口（Entry）**：这是构建流程的起点，定义了...
webpack-config-reload:热加载 webpack 配置。修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server
05-05
修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server，比较方便的是在调试 webpack 繁琐的配置时候，省去一遍遍地 Ctrl+c 和重复输入命令。 注意：只支持 webpack/webpack-dev-server 两个命令。 安装...
webpack相关.md
11-22
webpack相关.md
Webpack相关资源类库和工具汇总
08-10
12. **awesome-webpack**：这个资源库可能包含了各种与 Webpack 相关的最佳实践、插件、loader 和指南，是学习和查找 Webpack 相关资源的好地方。 Webpack 的强大在于其灵活性和可扩展性，通过合理的配置和插件选择...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
webpack相关参数
07-14
Webpack有很多参数可以配置，以下是一些常用的Webpack参数： 1. entry：入口文件，指定Webpack开始构建的文件。 2. output：输出配置，指定Webpack打包后的文件输出路径和名称。 3. module：模块配置，用于配置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值