webpack_前端博客-专业IT技术发表平台

推荐付费专栏 VIP文章

真的很上进

Webpack--入门只看这一篇就够了(图文＋代码）代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。

阅读 2.2w

145赞

一个前端人

使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 实现 PDF 文件显示、定位和高亮使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 实现 PDF 文件显示、定位和高亮

阅读 838

3赞

使用 Webpack 和 LocalStorage 实现静态资源的离线缓存使用 Webpack 和 LocalStorage 实现静态资源的离线缓存

阅读 6.3k

52赞

风之少女梦

Webpack vs Vite：深度对比与实战示例，如何选择最佳构建工具？在现代前端开发中，构建工具至关重要，能直接影响开发效率和项目性能。Webpack 曾经是前端构建的事实标准，但随着前端生态的变化，Vite 作为新一代工具迅速崛起，凭借更快的启动速度和更好的开发体验赢得了大量用户。那么，Webpack 和 Vite 到底有哪些核心区别？本文将深入剖析两者的不同，并通过代码示例帮助你做出选择。你更喜欢 Webpack 还是 Vite？开箱即用，适合 Vue/React 项目。，直接使用 ESM，启动速度极快。如果需要自定义配置，可编辑。后才能启动，耗时较长。

阅读 705

70赞

【前端安全】逆向webpack加密算法 webpack一个静态模块打包器，有入口、出口、loader和插件，通过loader加载器对js、css、图片文件等资源进行加载渲染。

阅读 2.3k

14赞

weixin_724849599

Webpack vs Vite：深度对比与实战示例，如何选择最佳构建工具？在现代前端开发中，构建工具至关重要，能直接影响开发效率和项目性能。Webpack 曾经是前端构建的事实标准，但随着前端生态的变化，Vite 作为新一代工具迅速崛起，凭借更快的启动速度和更好的开发体验赢得了大量用户。那么，Webpack 和 Vite 到底有哪些核心区别？本文将深入剖析两者的不同，并通过代码示例帮助你做出选择。你更喜欢 Webpack 还是 Vite？开箱即用，适合 Vue/React 项目。，直接使用 ESM，启动速度极快。如果需要自定义配置，可编辑。后才能启动，耗时较长。

阅读 518

53赞

webpack快速上手之搭建cesium三维地球环境 CesiumJS是目前主流的一款三维地图框架，是一个跨平台、跨浏览器的展示三维地球和地图的JavaScript库，通过WebGL技术实现图形的硬件加速，不需要任何插件支持。Webpack是目前最流行的前端构建工具，可以让开发更加高效。本文就来分享一下如何使用webpack搭建Cesium三维地球环境。

阅读 3.1k

121赞

前端工程化之模块化开发 & webpack 常用的构建工具：webpack，vite，rollup，esbuild，rspack初始化参数运行一个脚本传入相关参数，给到 webpack.config.js 文件当中，最终创建 webpack 实例化，会初始化参数，初始化参数后，会进行，将当前脚本的参数和webpack参数进行合并，得出开始编译通过上一步得到的 options，触发 Compiler 实例，new Compiler(options)，进行，相当于调用插件的 apply 方法，添加对某些事件的监听执行Compiler的 run 方

阅读 1.2k

19赞

邓炜赛Song-Thrush

《Universal Webpack》项目常见问题解决方案《Universal Webpack》项目常见问题解决方案 universal-webpack Isomorphic Webpack: both on client and server 项目地址: https://gitcode...

阅读 845

18赞

Html-webpack-tags-plugin 常见问题解决方案 Html-webpack-tags-plugin 常见问题解决方案 html-webpack-tags-plugin lets you define html tags to inject with html-webpack-plugin ...

阅读 1.1k

17赞

【前端构建】Webpack: 现代前端开发的核心工具在当今复杂的前端开发环境中，Webpack 已经成为了不可或缺的工具。作为一个强大的静态模块打包器，Webpack 不仅简化了开发流程，还大大提高了应用程序的性能和可维护性。本文将深入探讨 Webpack 的核心概念、基本配置、高级特性以及最佳实践，帮助开发者更好地理解和使用这个强大的工具。

阅读 2.2k

131赞

BigbigbigPotato

【前端工程化】Webpack入门（保姆级教程）本篇文章通过处理各种资源来介绍 webpack 的一些基础且常用的配置的使用，更多的 loader，plugins 等使用方法还是得到官方文档查询。前端工程化是现代前端开发不可或缺的一部分，它帮助开发者创建可扩展、可维护且高性能的应用程序。随着前端技术栈的不断进步，工程化的最佳实践也在不断发展，以适应新工具和框架的出现。

阅读 2.0k

17赞

【掌握webpack】一张图让你明白webpack中output的filename、path、publicPath与主流插件的关系 webpack的核心概念，放到2022年相信很多的小伙伴都已经非常清楚了。但是，对于webpack配置中的output.path、output.filename以及output.publicPath，还有很多小伙伴还不理解。本文讲围绕output.filename、output.path与output.publicPath，讲解它们的功能，并分析这些配置与webpack中常使用到的MiniCssExtractPlugin、HtmlWebpackPlugin等插件的关系。more直接上总结图。

阅读 1.1k

10赞

Webpack、Vite区别知多少？相反，Vite只需要对源码进行预编译和打包，将每个模块作为一个独立的文件进行加载，这样在开发过程中的冷启动时间更快。，它可以将各种类型的文件，如JavaScript、CSS、图片等，作为模块进行打包，并生成最终的静态资源文件。，它利用浏览器原生的ES模块机制，将每个模块作为一个独立的请求来加载，而不是像Webpack那样把所有模块打包成一个文件。，因为需要将所有的模块进行打包。Vite通过利用ES模块的特性，在开发过程中仅对需要的模块进行编译和构建，从而提升了开发服务器的启动速度。

阅读 1.8k

14赞

Jest和Cypress与React、Babel、Webpack的集成指南 Jest和Cypress与React、Babel、Webpack的集成指南 jest-cypress-react-babel-webpack Configure Jest for Testing JavaScript Applications and Install, Configure, and Script Cypr...

阅读 534

27赞

前端面试-webpack 默认情况下，webpack只支持对js和json文件进行打包，但是像css，html，png等其他类型的文件，webpack则无能为力。因此需要配置响应的loader进行文件内容的解析转换。一个打包模块化Javascript的工具，在webpack中，所有文件都可以看成是模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组成的文件。webpack中的plugin在于解决loader无法实现的其他事。

阅读 748

15赞

webpack常见优化方法 3. 配置 externals。6. 使用 gzip 压缩。// 代码中使用动态导入。2. 优化第三方库的引入。

阅读 1.2k

23赞

npm发布组件（vue3+webpack）【代码】npm发布组件（vue3+webpack）

阅读 727

6赞

探索Webpack Virtual Modules：提升开发效率的新工具探索Webpack Virtual Modules：提升开发效率的新工具 webpack-virtual-modulesWebpack Virtual Modules is a webpack plugin that lets you create, modify, and delete in-memory files in a way that webpack treats them as i...

阅读 622

5赞

真的很上进

告别繁琐的路径配置：带你写一个让 Monorepo 项目模块导入更优雅的 Webpack 插件今天和大家分享的是如何从零开始写一个实用的Webpack提效插件(完整源码在文章最后).作为前端开发者，我们经常在monorepo项目中遇到一个问题：如何方便地在不同包之间相互引用代码？// 使用路径别名引入// 直接引入其他包为了实现这种引入方式，我们来开发一个插件来自动处理这些路径别名。通过插件的开发，我们可以：自动处理中的路径别名支持使用@monorepo前缀引用其他包不需要手动配置webpack的alias这样可以让我们在monorepo项目中更方便地管理和引用代码。

阅读 1.9k

67赞

作者推荐

Kinghiee: Front-end Developer

关注

一个专注写代码的程序媛: 本人是个小菜鸟，希望各位有空时可以回答一下我的问题，谢谢！

关注

duansamve: 我的Web前端(React、Vue)、NodeJS......开发笔记

关注

混血哲谈: 无论身在何处，勿忘佛子本分

关注

森叶: 多年谷歌插件开发、Electron 客户端开发经历偏前端全栈开发工程师熟练使用PHP、Python、Javascript、Java 四种语言王森出品必属精品

关注

漏洞猎人001: 编程是一种艺术，是一种能够创造奇迹的工具。通过学习和实践，我掌握了多种编程语言和技术框架，如Python、Java、JavaScript等，并在算法、数据结构、网络通信等领域有着深入的理解。我喜欢挑战复杂的问题，享受解决难题后的成就感

关注

jydchudq: 写代码的修狗狗一只

关注

Z编程: 一个爱编程的男人

关注

猛扇赵四那半好嘴: 程序媛一枚，热爱写 bug！

关注

问白: 网易高级前端开发工程师

关注