webpack
文章平均质量分 79
橙蚊镜0819
Step by step becoming an architect
展开
-
webpack(五)热更新
是指当我们对代码修改并保存后,webpack将会对代码进行重新打包,并将新的模块发送到浏览器端,浏览器用新的模块替换掉旧的模块 ,以实现在不刷新浏览器的前提下更新页面。例如,我们在应用运行过程中修改了某个模块,通过自动刷新会导致整个应用的整体刷新,那页面中的状态信息都会丢失如果使用的是HMR,就可以实现只将修改的模块实时替换至应用中,不必完全刷新整个应用。...,hot:true配置完成之后我们修改css文件,确实能够以不刷新的形式更新到页面中,但是当我们修改保存js。原创 2023-10-20 14:22:58 · 727 阅读 · 0 评论 -
webpack(四)plugin
本质是一个具有方法的对象方法会被调用,并且在整个编译生命周期都可以访问对象 的 方法的第一个参数,应是驼峰式命名的插件名称生命周期:构建时,清除dist包测试,在中添加一个文件,重新运行打包命令,消失构建时,帮助我们自动创建一个文件,并把打包生成的 模块引⼊到该 中测试,创建文件,添加一些内容,打包后在中生成文件会包含文件中的内容给我们自定义模板中填充数据,定义常亮填充数据使用内置插件babel-loaderbabel原理为什么需要:开发时写了等,需要转换为浏览器可以识别的安装核心:原创 2023-09-06 20:00:25 · 367 阅读 · 0 评论 -
webpack(三)loader
loader用于对模块的源代码进行转换,在imporrt或加载模块时预处理文件webpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定文件中。在webpack内部,任何文件都是模块,不仅仅是js文件默认情况下,遇到import或者require加载模块时,webpack只支持对js和json文件的打包,像等这些类型的文件,webpack则无能为力,这时候就需要配置对应的loader进行文件内容的解析。当webpack碰到不识别的模块的时候,webpack。原创 2023-09-01 18:00:25 · 477 阅读 · 0 评论 -
webpack(二)webpack介绍与基础配置
webpack最初的目标是实现前端项目模块化,旨在更高效的管理和维护项目中的每一个资源。可以看做是模块打包机,分析你的项目结构,找到javascript模块以及其它一些浏览器不能直接运行的拓展语言(等),并将其打包为合适的格式以供浏览器使用。原创 2023-09-01 09:29:25 · 563 阅读 · 0 评论 -
webpack(一)模块化
CommonJs是运行在node.js环境下的模块化规范,node的机制是在启动时,加载模块,执行时直接使用模块一个文件就是一个模块,每个模块都有单独的作用域通过导出,通过require函数导入浏览器在加载页面是,如果需要同步加载所有模块,必然导致性能低下,所以早期的浏览器没有使用CommonJS规范AMD主要用于浏览器端,通过define定义,通过require导入,异步加载模块CMD。原创 2023-08-29 14:15:46 · 980 阅读 · 0 评论