webpack
文章平均质量分 64
Ruonorth
The more you do,the more you can do.
展开
-
rollup打包第三方依赖
相比于webpack的通用性来说,rollup更专用于esmodule的处理。这在某些场景下会需要一些额外的配置来处理特殊场景。但是如果你使用的这个三方库没有默认default,则需要配合@rollup/plugin-commonjs使用。这是因为rollup打包会处理相对路径,对于npm包的绝对路径引用是不会做任何处理的。这种情况可以用插件处理。此时不出意外的话,第三方模块已经顺利打包进bundle包了。rollup在打包时是不会处理process环境的,这种情况需要插件额外处理。至此配置就全部完成了。原创 2022-09-29 19:04:18 · 5751 阅读 · 0 评论 -
webpack动态加载——懒加载实现
webpackMode如果不写的话,模块是不会单独打包成一个独立模块的。因为使用本地真实路径,node_modules的相关配置都会失效的。其中symlinks配置是用来标识是否将模块引入解析为真实路径。如果你需要打包的模块是自己用npm link链接的模块记得关闭。对于懒加载来说,不是独立模块是没办法在需要的时候单独加载的。./conf.base.cjs 基础配置。原创 2022-09-29 18:46:49 · 1704 阅读 · 0 评论 -
sentry——sourceMap解析错误解决
在local的22.8版本sourcemap执行正常,在远端的22.5版本,sourcemap解析异常。发现并无差异,这里推测是22.5到22.8升级时做了更合理化的解析。经过验证为框架内路径与线上路径映射问题,最终解决方案路径为更名。至于为什么本地可以解析远端不可以,在对比相关配置后。至此,sentry就可以正确寻址到对应源框架了。这时sourceMap解析可以正常解析。经过cli工具分析得到错误如下。这里尝试修改源文件的映射地址。可以看到这里的url地址是。完整的解决方案分为两种。原创 2022-09-22 18:15:57 · 1970 阅读 · 0 评论 -
实现一个简易的webpack打包过程
在实现一个简单的webpack之前,我们需要知道webpack为什么会诞生。在前端刚开始没有模块化工具的时候,会遇到什么问题呢?你可能需要把js都依次引入html中。这样做有几个问题多标签引入意味这这么多次的资源请求,对性能是极大的挑战如果资源有依赖关系,那么需要确保资源的引入顺序,可能会出问题文件中的东西不一定都能用到,但是都会进行资源传输,无法通过依赖分析只传输用到的内容如果在两个文件中定义了同名函数会冲突,除非全都给一个命名空间,把函数作为对象方法来使用<script src="原创 2021-04-25 21:10:49 · 719 阅读 · 1 评论 -
webpack优化——Dllplugin
前言我入行的时候前端框架就盛行,react、angular、vue等框架大行其道。这些框架的好处是十分显然的,便捷、快速且稳定。如果框架搭建的足够便捷不熟悉业务的人也能够快速上手项目,拿vue-cli来说,现成的脚手架已经集成了webpack、eslint、bable等常见框架的基础配置,而这些配置未必最优却通用性很强,对于初学者来说甚者可以不去了解这些常见框架就可以直接上手开发了。正是由于框架的便捷性,使得框架更加流行。vue-cli3更是直接把配置内置在了第三方插件里,让你在工作目录中完全看不到基础配原创 2021-03-04 01:57:05 · 1750 阅读 · 1 评论