![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 88
记录webpack打包工具的学习过程笔记
F-125
前端学习记录
展开
-
Babel的深度解析
以上只是是我在学习coderwhy老师的webpack课程中对Babel的简单理解和记录,想要了解更多关于webpack的配置分析及原理,可以去看coderwhy老师的课程。开发中,我们想要使用ES6+的语法,想要使用TypeScript,开发React项目,它们都是离不开Babel的;babel做到将我们的一段代码(ES6、TypeScript、React)转成另外一段代码(ES5)的原理。Babel编译器的作用就是将我们的源代码,转换成浏览器可以直接识别的另外一段源代码;原创 2023-04-16 00:07:19 · 348 阅读 · 0 评论 -
Webpack的source-map
webpack为我们提供了非常多的选项(目前是26个),来处理source-map,选择不同的值,生成的source-map会稍微有差异,打包的过程也会有性能的差异,可以根据不同的情况进行选择;推荐使用 source-map或者cheap-module-source-map ,分别是vue和react使用的值,可以获取调试信息,方便快速开发;会生成一个独立的source-map文件,并且在bundle文件中有一个注释,指向source-map文件;webpack提供的26个值,是可以进行多组合的;原创 2023-04-03 23:24:51 · 591 阅读 · 0 评论 -
Webpack加载和处理其他资源
在webpack5之前,加载这些资源我们需要使用一些loader,比如raw-loader 、url-loader、file-loader;在webpack5之后,我们可以直接使用资源模块类型(asset module type),来替代上面的这些loader;asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现;asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现;原创 2023-03-20 22:46:55 · 192 阅读 · 0 评论 -
Webpack打包原理及浏览器兼容配置
传递字符串(如:use: [ 'style-loader' ])是 loader 属性的简写方式(如:use: [ { loader: 'style-loader'} ]);这种方式可以更好的表示loader的配置,也方便后期的维护,同时也让你对各个Loader有一个全局的概览;条件查询使用的是caniuse-lite的工具,这个工具的数据来自于caniuse的网站上;兼容性是针对不同的浏览器支持的特性:比如css特性、js语法,之间的兼容性;原创 2023-03-06 23:35:33 · 1071 阅读 · 0 评论