![](https://img-blog.csdnimg.cn/1d4d610e114b40c294059e6f1f92637e.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack
文章平均质量分 57
webpack
亮学长
自律人生
展开
-
webpack中tree-shaking的使用和原理
设置,打包后,会有有一段注释,告知Terser在优化时,可以删除掉这段代码。原创 2022-09-06 11:43:09 · 950 阅读 · 0 评论 -
webpack代码压缩
【代码】webpack打包,禁止在文件内注释。原创 2022-09-05 22:27:08 · 537 阅读 · 0 评论 -
webpack代码分割
Chunks:默认值是async另一个值是initial,表示对通过的代码进行处理all表示对同步和异步代码都进行处理minSize:拆分包的大小, 至少为minSize;如果一个包拆分出来达不到minSize,那么这个包就不会拆分;maxSize:将大于maxSize的包,拆分为不小于minSize的包;minChunks:至少被引入的次数,默认是1;如果我们写一个2,但是引入了一次,那么不会被单独拆分;name:设置拆包的名称。..................原创 2022-08-16 19:10:45 · 1018 阅读 · 0 评论 -
webpack文件压缩
代码】Webpack之文件压缩compression。原创 2022-08-02 07:12:53 · 1712 阅读 · 0 评论 -
webpack打包css,img,html文件
bundle是由webpack打包出来的文件chunk是指webpack在进行模块依赖分析的时候,代码分割出来的代码块module是开发中的单个模块浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或者更新,都需要浏览器去下载新的代码,最方便和最简单的更新方式就是引入新的文件名称。什么是Tree-shakingTreeShaking是一个术语,在计算机中表示消除死代码(dead_code)指打包中去除那些引入了但在代码中没用到的死代码。.............原创 2022-07-13 15:47:54 · 1207 阅读 · 2 评论 -
webpack运行机制
1原创 2022-10-11 11:44:18 · 408 阅读 · 0 评论 -
webpack打包原理
代码】webpack打包原理。原创 2022-08-01 09:16:34 · 96 阅读 · 0 评论 -
webpack中,entry和output配置
1原创 2022-09-15 09:47:58 · 197 阅读 · 0 评论 -
webpack模块解析(alias + extensions + mainFields + main + module + resolveLoader)
alias原创 2022-09-07 09:14:20 · 369 阅读 · 0 评论 -
在webpack中,Scope Hoisting(范围提升)
发多少原创 2022-09-06 15:26:07 · 819 阅读 · 0 评论 -
webpack代码懒加载
在需要的时候,点击按钮才会加载相应的js文件,但是相关的js文件也需要单独打包。如果想在浏览器空闲的时候预加载文件,则加上注释。原创 2022-09-05 22:48:47 · 231 阅读 · 0 评论 -
在webpack中,Hash、ContentHash、ChunkHash
【代码】Hash、ContentHash、ChunkHash。原创 2022-09-05 15:06:14 · 774 阅读 · 0 评论 -
在webpack中,CDN是什么
发的原创 2022-09-05 14:59:00 · 569 阅读 · 0 评论 -
在webpack中,Shimming预支变量
【代码】Shimming预支变量。原创 2022-09-05 14:56:51 · 82 阅读 · 0 评论 -
rollup的使用
第一步:使用rollup-plugin-serve搭建服务。第二步:当文件发生变化时,自动刷新浏览器。第三步:启动时,开启文件监听。原创 2022-08-24 10:57:54 · 1048 阅读 · 0 评论 -
在webpack中,Gulp工具
什么是Gulp?一个工具包,可以帮你自动化和增加你的工作流;原创 2022-08-24 10:49:24 · 218 阅读 · 0 评论 -
webpack自定义plugin
常见的Plugin:这些Plugin是如何被注册到webpack的生命周期中的呢第一:在webpack函数的createCompiler方法中,注册了所有的插件第二:在注册插件时,会调用插件函数或者插件对象的apply方法第三:插件方法会接收compiler对象,我们可以通过compiler对象来注册Hook的事件第四:某些插件也会传入一个compilation的对象,我们也可以监听compilation的Hook事件。原创 2022-08-24 10:28:15 · 279 阅读 · 0 评论 -
webpack自定义loader
发送到发原创 2022-08-24 10:14:14 · 1961 阅读 · 0 评论 -
webpack环境分离
发送到发原创 2022-08-16 18:45:20 · 130 阅读 · 0 评论 -
webpack-dev-server(devServer)
修改了css、js源代码,会立即在浏览器更新,相当于直接在浏览器的devtools中直接修改样式;默认情况下,webpack-dev-server已经支持HMR,我们只需要开启即可;在不开启HMR的情况下,当我们修改了源代码之后,整个页面会自动刷新,使用的是live reloading;而是将 bundle 文件保留在内存中,事实上webpack-dev-server使用了一个库叫memfs(memory-fs webpack自己写的)将css提取到一个独立的css文件中。webpack热更新原理。....原创 2022-08-05 17:44:03 · 637 阅读 · 0 评论 -
webpack配置,处理vue文件
webpack.config.js文件。原创 2022-08-05 17:40:00 · 233 阅读 · 0 评论 -
eslint学习
上面各种情况的选择,综合总结出生成的。原创 2022-08-05 12:23:31 · 1076 阅读 · 0 评论 -
babel的使用和原理
promise和generator,symbol转换不了,需要装polyfill。@babel/core:babel的核心代码,必须安装;@babel/cli:可以让我们在命令行使用babel;–out-dir:指定要输出的文件夹dist;src:是源文件的目录;原创 2022-08-03 08:26:58 · 1187 阅读 · 0 评论 -
webpack和webpack-cli的关系
该文件最重要的函数就是runCli,该函数可以执行webpack-cli包中bin目录下的cli.js文件,也就是说在此之前的步骤只是为了找到cli.js文件,在此之后,webpack-cli才发挥作用。在第三方框架中,React和Vue(未使用Vite的版本)也没有使用webpack-cli.同时,webpack.js文件也做了一些辅助判断,首先查看你是否安装了webpack-cli,如果没有安装,就会询问你是否安装(或手动安装)该包,如果选择不安装,那么程序运行到这就停止了。...原创 2022-08-02 11:54:39 · 3767 阅读 · 0 评论 -
webpack源码学习
代码】webpack源码学习。原创 2022-08-02 11:53:49 · 213 阅读 · 0 评论 -
webpack模块化原理(处理cjs和esm混用,然后在浏览器中可执行)
代码】webpack模块化原理(处理cjs和esm混用,然后在浏览器中可执行)原创 2022-08-02 11:52:11 · 1535 阅读 · 0 评论 -
webpack做HTTP压缩
bundle是由webpack打包出来的文件chunk是指webpack在进行模块依赖分析的时候,代码分割出来的代码块module是开发中的单个模块浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或者更新,都需要浏览器去下载新的代码,最方便和最简单的更新方式就是引入新的文件名称。...原创 2022-08-02 08:03:36 · 297 阅读 · 0 评论 -
webpack之打包libraryTarget
ˈlaɪbrəri]图书馆,软件库。原创 2022-08-02 07:14:58 · 1303 阅读 · 0 评论 -
webpack之dll
代码】webpack中treeshaking。原创 2022-08-02 07:09:30 · 309 阅读 · 2 评论 -
webpack中polyfill和runtime的区别,ES stage的含义,preset–env的作用
babel-runtime它不会污染全局对象和内置对象的原型,比如说我们需要Promise,我们只需要importPromisefrom'babel-runtime/core-js/promise’即可,这样不仅避免污染全局对象,而且可以减少不必要的代码。我们使用es6的语法来编写,最终会通过babel-runtime编译成es5.也就是说,不管浏览器是否支持ES6,只要是ES6的语法,它都会进行转码成ES5.所以就有很多冗余的代码。Stage1-建议(Proposal)这是值得跟进的。...原创 2022-08-02 06:57:50 · 322 阅读 · 0 评论 -
webpack热更新
HMR热更新。原创 2022-08-01 10:07:10 · 2229 阅读 · 0 评论 -
webpack打包之sourcemap
希望看到每个loader,每个plugin消耗的打包时间,可以借助一个插件:speed-measure-webpack-plugin,该插件有webpack版本兼容问题。source-map 比 eval信息更加的全,不仅仅展示出错误的源文件,而且把源文件的目录都给展示出来,这样方便用户查看项目结构。默认情况下,打包完成展示,打包的总时间,并没有告诉我,每个插件使用所消耗的时间。影响 npm run build 打包时间:node版本,电脑性能。有部分插件不支持,可能不支持,需要给注释一下。........原创 2022-08-01 10:05:43 · 6514 阅读 · 0 评论 -
webpack的构建流程是什么?从读取配置到输出文件
在以上过程中,Webpack会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用Webpack提供的API改变Webpack的运行结果。Webpack的运行流程是一个串行的过程,从启动到结束会依次执行以下流程\。...原创 2022-08-01 09:56:44 · 205 阅读 · 0 评论 -
提高webpack打包速度
引用但是绝对不会修改的npm包来进行预编译,再通过DllReferencePlugin将预编译的模块加载进来。利用DllPlugin和DllReferencePlugin预编译资源模块通过DllPlugin来对那些我们。使用webpack-uglify-paralle来提升uglifyPlugin的压缩速度。原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度。使用Tree-shaking和ScopeHoisting来剔除多余代码。通过externals配置来提取常用库。..原创 2022-08-01 09:52:22 · 223 阅读 · 0 评论 -
gulp,rollup 与 webpack,vite区别是什么
gulp强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义task处理的事务(例如文件压缩合并、雪碧图、启动server、版本控制等),然后定义执行顺序,来让gulp执行这些task,从而构建项目的整个前端开发流程。webpack是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源(图片、js文件、css文件等)都看成模块,通过loader(加载器)和plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。gulp是基于任务和流(Task、Stream)的。...原创 2022-08-01 09:44:57 · 892 阅读 · 0 评论