开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

从“Webpack”看进出口

Webpack是一个现代化的前端打包工具，它主要用于将多个前端资源（如JavaScript、CSS、图片等）进行打包和优化，以提高网页加载速度和性能。

Webpack的主要特点和优势包括：

模块化支持：Webpack支持将前端代码按照模块化的方式进行组织和管理，可以使用ES6的模块化语法或者其他模块化方案（如CommonJS、AMD等）。
代码拆分：Webpack可以将代码拆分成多个小块，实现按需加载，从而减少初始加载时间，提高用户体验。
资源优化：Webpack可以对前端资源进行优化，如压缩JavaScript、CSS、图片等，减小文件体积，提高加载速度。
插件系统：Webpack拥有丰富的插件生态系统，可以通过插件实现各种功能扩展，如代码分割、代码压缩、自动化构建等。
开发环境支持：Webpack提供了开发环境下的热更新功能，可以实时预览修改后的效果，提高开发效率。

Webpack的应用场景包括：

前端项目构建：Webpack可以将多个前端资源打包成一个或多个文件，方便部署和发布。
模块化开发：Webpack支持模块化开发，可以将前端代码按照模块划分，提高代码的可维护性和复用性。
性能优化：Webpack可以对前端资源进行优化，如代码压缩、图片压缩等，提高网页的加载速度和性能。
多页面应用：Webpack可以将多个页面的前端资源进行打包，减少页面间的资源冗余和加载时间。

腾讯云相关产品和产品介绍链接地址：

云开发（CloudBase）：腾讯云提供的一站式后端云服务，可以快速搭建和部署云端应用，支持前端开发、后端开发、数据库等多种功能。详细介绍请参考：https://cloud.tencent.com/product/tcb
云函数（SCF）：腾讯云提供的无服务器计算服务，可以在云端运行代码，支持事件触发和定时触发等多种触发方式。详细介绍请参考：https://cloud.tencent.com/product/scf
云存储（COS）：腾讯云提供的对象存储服务，可以存储和管理各种类型的文件，支持高可靠性和高可扩展性。详细介绍请参考：https://cloud.tencent.com/product/cos
云监控（CloudMonitor）：腾讯云提供的全方位监控服务，可以实时监控云上资源的运行状态和性能指标，提供报警和自动化运维等功能。详细介绍请参考：https://cloud.tencent.com/product/monitor

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

从webpack到rollup

一.放弃webpack的原因 1.webpack模块可读性太低 // 引用模块 var _myModule1 = __webpack_require__(0); var _myModule2 = __...__id，再找对应的模块定义，最后看该模块exports身上挂了什么东西。...看bundle差异主要在于函数名简化，cjsbundle中很多长函数名保留下来了，没有被混淆掉三.rollup的缺陷目前最新版本（0.50.0）仍然处于0.x的不稳定状态，版本相关的问题比较多（甚至某些问题还需要通过版本降级来解决...尽量通过内部实现（或设计）来避免，解决循环依赖的常用技巧有：依赖提升，把需要相互依赖的部分提升一层依赖注入，运行时从模块外部注入依赖依赖查找，运行时由模块内部查找依赖依赖提升针对不合理的设计，此类循环依赖是本能够避免的...} // Will be injected from factory _createFromFactory() { return null; } } 所以循环依赖是可以从设计

1.5K2 0

从 Vue 转换看 Webpack 和 Vite 代码转换机制的差异

打包工具遇到 import 语句，会分别处理： • script：从 vue-loader/插件中，取出之前缓存的 script，然后交给其他 JS loader/插件处理（如 babel） • template...：从 vue-loader/插件中，取出之前缓存的 template，然后交给其他 JS loader/插件处理（因为 template 转换成 render 函数，这部分也是 JS 类型） • style...：从 vue-loader/插件中，取出之前缓存的 style，然后交给其他 Style loader/插件处理（如 Less） Vue 的转换，在 webpack 和 vite 都是类似的思路，只不过由于...vue&type=script 在 load 阶段，会依次经过所有插件，经过 Vue 插件，从之前的缓存中，取出 script 部分（如果插件执行 load 阶段时有返回值，则立即结束 load 阶段）...vue&type=script&setup=true&lang=js" 这种内联 loader 的能力，在 import 的路径中显式的指定了该模块会经过的 loader： • 从后往前看，最后的是处理的文件

6923 0

webpack 从入门到放弃

简介 Webpack + ES6 已经成为目前最流行的前端解决方案，本文是 Webpack2 学习教程。在「What is webpack」一文中作者讲述了自己为什么要开发出 webpack。...webpack 配置文件在命令行中输入 webpack 命令，webpack 会自动寻找 webpack.config.js 文件，并按照里面的配置对项目进行打包。.../dist/js', filename: 'bundle.js' } } entry 参数表明我们的打包是从哪个文件开始的，output 参数定义打包后的文件如何存储。...webpack 几个重要概念 entry webpack 根据 entry 创建所有应用程序依赖图表，entry 告诉 webpack 从哪里开始，并遵循着依赖关系图打包。..."style-loader", "css-loader", "less-loader" ] }] }, loader 的执行顺序为从后往前执行

5465 0

webpack从0到1构建

但是时常会遇到，不依赖成熟的脚手架，从零搭过项目吗，有遇到哪些问题吗？或者有了解loader和plugin吗？如果只是使用脚手架，作为一个深耕业务一线的工具人，什么？还要自己搭？...", }, } 首先我们在在开发依赖安装webpack与webpack-cli,执行npm i webpack webpack-cli --save-dev在webpack5中我们默认新建一个webpack...如果配置默认文件名就是webpack.config.js那么webpack就会根据这个文件进行打包,webpack --config xxx.js是指定自定义文件让webpack根据xxx.js输入与输出的文件进行一系列操作...build:default": "webpack --config webpack.config.js", }, 除了以上，我们可以不使用配置webpack --config webpack.config.js...app.bundle.js 5、熟悉从0到1搭建一个前端工程化项目 6、本文示例code-example[9] 下一节会基于当下项目搭建vue、react项目，以及项目的tree-shaking,懒加载

1.2K1 0

webpack从零搭建开发环境

npm init -y npm i webpack webpack-cli --save-dev npm -S 是--save的缩写是生产 npm -D 是--save-dev的缩写是开发 webpack-cli...production", "}, webpack 配置文件默认叫 webpack.config.js webpack.file.js 默认导出的是配置文件入口 module.exports={ /..."webpack --env.development" }, 为了区分开发模式和生产模式会新建一个 build 文件新建一个基础配置 webpack.base.js webpack.base.js...webpack.dev.js webpack.prod.js通过--config 指定执行的文件是哪一个。.../index.css' //引入css 1.loader 的执行顺序默认从下往上执行从右往左执行 2.css-loader 会解析 css 语法 style-loader 会将解析的 css 变成

1.2K2 0

从 Vue typings 看 “this”

在 2.5.0 版本中，Vue 大大改进了类型声明系统以更好地使用默认的基于对象的 API。

531 0

从MediaPlayerService看Binder

MediaPlayerService是系统多媒体服务的一种，系统多媒体服务是由一个叫做MediaServer的服务进程提供的，它是一个可执行程序，在Androi...

8682 0

从 Vue typings 看 “this”

在 2.5.0 版本中，Vue 大大改进了类型声明系统以更好地使用默认的基于对象的 API。

8473 0

【Webpack】373- 一看就懂之 webpack 高级配置与优化

webpack 提供了一个 devtool 属性来配置源码映射。...为什么 webpack 会存在跨域问题？...我们还可以不通过 webpack 提供的 devServer 来启动 webpack，而是使用自己服务器来启动 webapck。...const express = require("express"); const app = express(); const webpack = require("webpack"); // 引入webpack.../webpack.config.js"); // 引入配置文件 const compiler = webpack(config); // 创建webpack的编译器 const middleWare =

9963 0

如何从Webpack迁移到Vite

本文将介绍如何将前端web应用程序从 Webpack 升级到 Vite。 Vite 是最新的前端开发工具，其受欢迎程度和采用率都在大幅增长。可以查看下图中来自 npm trends 的下载。...vite 在我们深入探讨从 Webpack 迁移到 Vite 的过程之前，值得注意的是，前端开发领域正在不断发展，Vite 并不是唯一受到关注的工具。...与 Webpack 这样成熟的工具相比，首先考虑的是第三方插件的生态系统。在 Webpack 使用的十年间，npm 上有数十个核心/官方 Webpack 插件和数百（可能数千）个社区贡献的插件。..."dev": "vite serve", 同时，卸载Webpack： npm uninstall –save webpack webpack-cli wepack-dev-server 现在再来试试新的开发脚本吧...从 Webpack 过渡到 Vite 确实需要仔细规划和测试，尤其是在考虑插件替换或重构时。但这一举措也会带来可观的回报。

3081 0

如何从Webpack迁移到Vite

本文将介绍如何将前端web应用程序从 Webpack 升级到 Vite。 Vite 是最新的前端开发工具，其受欢迎程度和采用率都在大幅增长。可以查看下图中来自 npm trends 的下载。...vite 在我们深入探讨从 Webpack 迁移到 Vite 的过程之前，值得注意的是，前端开发领域正在不断发展，Vite 并不是唯一受到关注的工具。...与 Webpack 这样成熟的工具相比，首先考虑的是第三方插件的生态系统。在 Webpack 使用的十年间，npm 上有数十个核心/官方 Webpack 插件和数百（可能数千）个社区贡献的插件。..."dev": "vite serve", 同时，卸载Webpack： npm uninstall –save webpack webpack-cli wepack-dev-server 现在再来试试新的开发脚本吧...从 Webpack 过渡到 Vite 确实需要仔细规划和测试，尤其是在考虑插件替换或重构时。但这一举措也会带来可观的回报。

2321 0

从零认识webpack4.0，带你走进神秘的webpack

4.0，文章将在4.0 的基础上，从使用者的角度，一步步教你认识并搭建一个简单的webpack配置项目，当然webpack的配置和使用较为丰富且复杂。...两个基本的依赖：首先webpack 项目的两个核心基础模块是webpack 和webpack-cli，这是webpack项目构建的前提 npm install --save-dev webpack...webpack-cli 2....运行webpack 默认情况下，webpack 运行构建指令默认以项目文件夹下的 src/index.js 作为入口文件，运行 webpack指令会执行默认的webpack 配置文件。...BROWSER_SUPPORTS_HTML5) require("html5shiv"); 7.3 copy-webpack-plugin 这个插件看名字就知道它有什么作用，没错，就是用来复制文件的。

4443 1

看啥双拱门，来学 webpack 3啊

现在 webpack 3 已经走到了 3.8 版本。现版本对于 webpack 2.x 的配置项来说，最突出的就是 loader 的写法的改变和内置了 webpack-dev-server 的特性。...所以，本文将带你全面了解一下 webpack 3.x 版本的新特性和一些常用的 webpack 3.x 的配置。...这时候，就涉及到多入口文件的 webpack.config.js 设置。这里，可以利用 webpack-merge 来帮助我们完成多入口的合并设置。...不过，webpack 可以生成多种 sourceMap 文件，具体的区别是，映射还原度的区别。这里直接参考 webpack 官方文档即可。 ?...如果用过 webpack-dev-server 的同学，应该就很熟悉了。那如果利用 webpack，起一个简单的 server 服务呢？

8512 0

从API源码看API经济 | 从开发角度看应用架构13

将@DELETE的注释添加到deletePerson（Long id）方法，以允许HTTP DELETE请求从数据库中删除Person; 与返回单个Person的方法类似，deletePerson方法需要一个...开发流程：从瀑布、敏捷到devops 应用架构：从单体应用、多层应用到微服务部署方式：才能高物理机、虚拟机到容器应用基础架构：从数据中心到云 ?...分层接入权限使您能够轻松地通过收费计划而从API中获益。 ? 为什么提到合约，IT发展到一定阶段，一方面可以把我们的服务提供给集成商，商业伙伴。...ActiveDocs 通过基于Swagger框架的3scale ActiveDocs，您的开发人员可以从文档网页实时探索API。...从应用视角查看调用： ? 给用户配置查看报告的权限： ?

1.5K2 0

从Class源码看反射

日常敲码中，如果想要在程序运行阶段访问某个类的所有信息，并支持修改类的状态或者行为的话，肯定会用到反射，而反射靠的就是Class类。Java的动态代理也用到了这...

7882 0

从 Bundleless 看前端构建

img 前端工程构建时间的拉长，自然使得前端开发者在日常业务工作中的状态，从图左逐渐运动到了图右。 ?...img Snowpack vs Webpack 我们不妨将其与 Webpack 进行一个对比。 ?...Webpack 在生产环境会把没有使用到的代码 Tree-shaking 掉，不可谓不强大。...不过即使 Snowpack 有千番好，整个 Bundleless 生态还不足以取代 Webpack。Webpack 终究是一代神器，只是我们明白 Bundleless 也确实代表了未来。...有趣的是，他和 Webpack 作者 Sean 在推上的讨论可以看出，大佬们也在 Bundleless 方向不断发力，Webpack 成为了大家发起挑战的目标。 ?

4981 0

从消息队列看OpenStack

以往介绍openstack的文章通常都是从各个组件的整体角度来进行介绍，并没有深入的介绍组件内部服务究竟是如何通信的。本文这次将换一个角度，从消息队列的角度来看openstack。...nova-conductor服务从消息队列中收到虚拟机创建请求后，将会进入一个长时间的虚拟机创建流程。...以上就是虚拟机创建流程的一个简要说明，从创建流程中可以看到，消息队列对于openstack至关重要。...(nova组件中的服务即是生产者，也是消费者) [nova-mq-arch.png] 以上一章节中提到的虚拟机启动为例，根据这里的消息队列模型再看一下虚拟机的启动流程，按照上图红色部分从左向右。...从图中可以看到，每个nova-scheduler服务都会有一个队列连接到scheduler_fanout exchange上。

1K4 0

我们为什么从 Webpack 转向 Vite

尽管 JavaScript 生态系统为专业开发人员提供了很多出色的工具，但其中许多最流行的工具（例如 Create React App 和 Webpack）逐渐变得愈加复杂和效率低下。...Esbuild 是用 Go 语言编写的一个 JS 打包器，其打包依赖项的速度比基于 JavaScript 的 Webpack 和 Parcel 等竞争方案快 10 到 100 倍。

3922 0

从Highlight浅谈Webpack按需加载

看了看 highlight.js 的提供的相关代码 !...并且使用 import { xx } from 'moduls' 并不能触发 webpack 的 treeshake，webpack仍然会打包完整库，哪怕引用的仅仅是从库里导出的接口(在ECharts下是如此表现的...分析一下webpack打包的行为 webpack始终结合关键字并按照静态地址信息进行打包。...这个问题在另一个组件中得到了解决 react-syntax-highlighter 还没来得及看具体的实现，不过我估计应该是使用了 CSS-MODULES，明天再看看没来得及验证的部分有注意到我在使用...会打包 'highlight.js/styles/*'下所有文件猜想在TS下即使只从某个库里引用接口, import { IXxx } from 'xxx',webpack仍然会打包所有的 'xxx

1.9K1 0

从源码看集合ArrayList

具体的我们看源码： public static void main(String[] args){ ArrayList list = new ArrayList iterator() { return new Itr(); } //内部类，我们只看其中remove方法 private class Itr

6286 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭