256浏览

0评论

介绍下 webpack 热更新原理，是如何做到在不刷新 浏览器的前提下更新页面的

1.当修改了一个或多个文件； 2.文件系统接收更改并通知 webpack； 3.webpack 重新编译构建一个或多个模块，并通知 HMR 服务器进行更新； 4.HMR Server 使用 webS...

• 空空 / 工程化 / 2023-05-05

234浏览

0评论

. webpack 热更新的实现原理？

webpack 的热更新⼜称热替换（Hot Module Replacement），缩写为 HMR。这个机制可以做到不⽤刷新浏览器⽽将新变更的模块替换掉旧 的模块。原理：⾸先要知道 server 端和 client 端都做了处理...

• 空空 / 工程化 / 2023-01-29

285浏览

0评论

Loader 和 Plugin 的不同

不同的作⽤:Loader 直译为"加载器"。Webpack 将⼀切⽂件视为模块，但是 webpack 原⽣是只能解析 js⽂件，如果想将其他⽂件也打包的话，就会⽤到 loader 。 所以 Loader 的作...

• 空空 / 工程化 / 2023-01-29

269浏览

0评论

bundle，chunk，module 是什么？

bundle：是由 webpack 打包出来的⽂件；chunk：代码块，⼀个 chunk 由多个模块组合⽽成，⽤于代码的合并 和分割；module：是开发中的单个模块，在 webpack 的世界，⼀切皆模块，⼀ 个模...

• 空空 / 工程化 / 2023-01-29

243浏览

0评论

有哪些常⻅的 Plugin？

define-plugin：定义环境变量html-webpack-plugin：简化 html⽂件创建uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码webpack-para...

• 空空 / 工程化 / 2023-01-29

273浏览

0评论

有哪些常⻅的 Loader

file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去source-map...

• 空空 / 工程化 / 2023-01-12

241浏览

0评论

webpack、rollup、parcel 优劣？

webpack 适⽤于⼤型复杂的前端站点构建: webpack 有强⼤的 loader 和插件⽣态,打包后的⽂件实际上就是⼀个⽴即执⾏函数，这个⽴即 执⾏函数接收⼀个参数，这个参数是模块对象，键为各个模块的路径， 值为模块内容。⽴即执⾏函数...

• 空空 / 工程化 / 2023-01-12

293浏览

0评论

webpack 与 grunt、gulp 的不同？

Grunt、Gulp 是基于任务运⾏的⼯具： 它们会⾃动执⾏指定的任务， 就像流⽔线，把资源放上去然后通过不同插件进⾏加⼯，它们包含活 跃的社区，丰富的插件，能⽅便的打造各种⼯作流。Webpack 是基于模块化打包的⼯具: ⾃动化处理模块，...

• 空空 / 工程化 / 2023-01-12

207浏览

0评论

如何提⾼webpack 的构建速度？

1.多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码2.通过 externals 配置来提取常⽤库3.利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过...

• 空空 / 工程化 / 2023-01-12

309浏览

0评论

如何⽤webpack 来优化前端性能

⽤webpack 优化前端性能是指优化 webpack 的输出结果，让打包的最 终结果在浏览器运⾏快速⾼效。压缩代码：删除多余的代码、注释、简化代码的写法等等⽅式。可以 利⽤webpack的 UglifyJsPlugin 和 Paralle...

• 空空 / 性能优化 / 2023-01-12